相关疑难解决方法(0)

HTML5引入了一个新的"progress"元素,默认情况下将其呈现为进度条(温度计).

一个非常基本的例子是:

<progress max="100" value="85"></progress>

我一直在尝试使用javascript的各种进度圈选项,并且这里讨论的一些纯CSS方法给我留下了非常深刻的印象: CSS Progress Circle

我有兴趣知道是否有人成功地将CSS应用于"progress"元素以提供饼图/时钟/圆形渲染而不是线性显示？

EDIT/ADDENDUM:"仪表"元素也非常类似于"进度",但提供了低/高范围......我更多地提到这一点,对于未来可能偶然发现这篇文章并希望应用类似技术的人到HTML5米元素.

我正在尝试绘制一个带有border-radius的圆圈,并为其设置动画.我可以这样做,但我不能做的是覆盖元素并将圆形背景设置为透明,而不取消隐藏蒙版.我无法使其在元素上透明,因为需要应用蒙版以在旋转时隐藏圆圈的左半部分以模仿绘制效果.

HTML

<div class="background">
    <div class="wrapper">
        <div class="pie spinner"></div>
        <div class="pie filler"></div>
        <div class="mask"></div>
    </div>
</div>

CSS

.background{
    background:green;
    z-index: 1000;
}
.wrapper {
  width: 250px;
  height: 250px;
  position: relative;
  margin: 40px auto;
  background: rgba(0,0,255,1);

}

.wrapper, .wrapper * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.wrapper .pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: transparent;
  border: 5px solid rgba(0,0,0,0.9);
}

.wrapper .spinner {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  z-index: …