关于html:轻松实现进度条的方法之-meter

先看来一张图片，一张带有进度条成果的图片，或者丑化一下，你能够当做是充电成果的图。

这张图是继上篇文章《这样写 step 步骤条就轻松了》而延长进去的，在上一篇中提到应用 progress 标签来实现一个进度条的成果，并没有提供任何绝对比拟具象的 demo。这次，不仅有了一个比拟具象的 demo（尽管不是特地炫酷），同时，还将会介绍一个新的标签，一个比 progress 更弱小的标签。

这个成果其实就是两个标签元素叠加而成，为了造成那种所谓的波浪的成果，会对两个元素做轻微的差别解决，以及在不同进度值显示不同的色彩值。

在这两张图中，咱们可能发现不同的点是：

圆角的幅度各异；
两个元素的透明度不同；
两个元素仿佛有错落感；
两张图的色彩不同；

思考到心愿是通过一个 HTML 元素标签来实现成果的，那么这里用到的波浪就用 ::before 和 ::after 了。用这两个也是有一些其余起因，因为咱们有一个动画成果须要应用 animation 属性，然而在伪元素中，前面提到的几个伪元素在 Chrome 中不反对，不过在 Safari 中却是能够的。

这个圆角是批改了 border-radius 的八个值所得，具体是怎么样的一个值，齐全是看情绪，比方我是这样的。

图中所示的小工具是很早之前折腾的一个解决圆角的小工具，用这个小工具就是能够间接利落每个角，而后失去成果，就不必一个值一个值的手动批改了。

间接应用不同的 opacity 值，叠加一下就好了。

联合 opacity 属性，再通过 left 或者 margin-left 等值进行地位偏移，最终联合不同的 border-radius 就能够了。

这个就是要联合咱们接下来要提到的 HTML 元素了，该元素能够让咱们在不同的 value 值展现不同的色彩成果。相比拟 progress 元素，会有更多的可配置性。

这个就是咱们要理解的 meter 标签，相比拟 progress 而言，多了几个阶段标识，从而也就是有了不同的色彩值。

同样的 meter 标签在关上 shdow DOM 查看的时候，也是可看到几个伪元素的存在，相比拟 progress 而言，咱们能够发现，同样是三层嵌套的构造，然而在 meter 的最初一层嵌套时，伪元素的类名是会依据 value 的状况而扭转的。正因为如此，才会有不同阶段的色彩值。

min
max
value
low
high
optimum

相比 progress 多了 low、high 以及 optimum 这三个可管制进度展现成果的属性。不同的取值后果最终将间接影响色彩显示成果。失常状况下，个别倡议是：min ≤ low ≤ high ≤ optimum ≤ max，是的，只是说失常状况下，如果非正常状况下，肯定要让 high 小于 low 也不是不能够，只不过最终色彩的示意就呵呵了。如果 optimum 是在 min 和 low 的区间之间，那么可能导致的后果就是两种色彩互调。

::-webkit-meter-inner-element
::-webkit-meter-bar

上述这两个跟 progress 中的没啥区别，就是层级嵌套，包裹着用的。而上面这三个就是有差别了。

::-webkit-meter-optimum-value
::-webkit-meter-even-less-good-value
::-webkit-meter-suboptimum-value

从命名能够看到，次要就是三种不同值的色彩示意形式。

even-less-good（红色）
suboptimum（黄色）
optimum（绿色）

<meter min="0" max="10" low="3" high="6" optimum="7" value="2"></meter>

简略清晰明了的 HTML 代码，前面咱们须要扭转就是 value 值就能够了。

meter {
  position: relative;
  width: 200px;
  height: 50px;
  margin-top: 100px;
  border: 5px solid #000;
  border-radius: 16px;
  overflow: hidden;
  appearance: none;
}

这部分要害的次要就是 position、overflow 以及 appearance 这三个，appearance 次要作用是为了批改外观款式，而另外两个则是在上面管制 ::before 和 ::after 的时候所应用的。

meter::after,
meter::before {
  content: '';
  position: absolute;
  top: -200%;
  left: var(--roundLeft);
  width: 200px;
  height: 200px;
  border-radius: 182px 171px 150px 202px / 200px 219px 141px 149px;
  background-color: var(--bgc);
  opacity: 0.3;
  z-index: 1;
  animation: 3s linear 0s infinite rotateItem;
}
meter::before {left: calc(var(--roundLeft) - 5%);
  border-radius: 151px 132px 178px 118px / 174px 129px 189px 172px;
  opacity: 0.5;
}

在这里能够看到，有一个 animation，所以，还须要补上一个 @keyframes 的关键帧。

@keyframes rotateItem {
  from {transform: rotate(1deg);
  }

  to {transform: rotate(360deg);
  }
}

也是很简略的一段动画款式，就是为了让那个不规则的圆圈圈转起来。

心细的你你必定还看到了 --roundLeft 和 --bgc 这两个 CSS 变量，以及在 ::before 中应用 calc() 计算偏移量的形式。这两个 CSS 变量的次要作用是前面为了通过属性选择符去管制每个阶段的色彩和地位，比方这样：

meter[value="0"]::after,
meter[value="0"]::before {
  --roundLeft: -90%;
  --bgc: #f00;
}
/* 省略局部 */
meter[value="5"]::after,
meter[value="5"]::before {
  --roundLeft: -50%;
  --bgc: #f0f;
}
/* 省略局部 */
meter[value="10"]::after,
meter[value="10"]::before {
  --roundLeft: 0%;
  --bgc: #0f0;
}

后面咱们提到了，是能够依据 value 值，间接通过三个不同的伪元素去扭转色彩。如果咱们不是应用 ::before 或者 ::after 的话，确实是能够的。然而咱们当初是应用了，因而那三个色彩值就没什么作用了，也无奈从这样的层级构造中传递到外层作为继承应用。

所以，罗唆就间接把这三个色彩值透明化。

meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-even-less-good-value,
meter::-webkit-meter-suboptimum-value {background-color: transparent;}

这么一折腾，最终咱们其实并没有利用 meter 组件个性，反而只是联合 value 属性，通过属性选择符而实现了地位的变动。然而这几个伪元素始终是存在的，只不过这个 demo 无奈证实其可用性。或者是我过于冀望想通过每个值得到成果，并且又想要加上 animation 动画成果的关系。

假如，如果 Chrome 中可能很好反对 animation 的动画成果，就能够不必利用 ::before 和 ::after 来实现，也就有可能通过 Shadow DOM 中的伪元素了。

在最初，meter 标签的次要作用是展现，而如果心愿有互动成果的话，那么咱们能够做的大略可能就有：

通过 N 个 :hover 伪类去实现鼠标滑过扭转的成果；
通过 :checked 实现点击后切换不同色彩的成果；
内部通过批改 input 输出扭转 meter 的 value 值，而这里咱们应用了 type='range' 的 input 来实现滑动利落扭转值；

<input type='range' value="2" step="1" min="0" max="10" id="changeMeter" />
<script>
  const mv = document.getElementById('meterValue');
  const cm = document.getElementById('changeMeter');
  cm.onchange = function () {mv.value = cm.value;}
</script>

最初通过款式，笼罩在 meter 上，同时暗藏这个 input 就好了。

#changeMeter {
  width: 200px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  z-index: 5;
  opacity: 0;
}

这样写 step 步骤条就轻松了

首发集体公众号： 志语自乐 （https://mp.weixin.qq.com/s/r_…

关于html:轻松实现进度条的方法之-meter

波浪动画成果

圆角的解决

通明的解决

错落感

不同色彩

meter 标签

罕用属性列表

伪元素列表

款式优化

最初的成果

相干浏览：