Html 循环百分比进度条

我希望在我的网站上有一个百分比圆圈指示器：

在这种情况下，它显示了75%。如何做到这一点？我在一个图像文件中有一个黄色的圆圈，但是如果使用CSS更容易，或者更容易，那我就可以了。

你试过这个吗

<percent-display percent="75" side="" colors=""></percent-display>

---

来源：

考虑到进度条的形状（圆形结束/开始），我建议使用SVG

演示：

在下面的示例中，使用

stroke dasarray

属性设置进度动画，并使用jQuery递增百分比数字：

var count=$（'#count'）；
$（{Counter:0}）.animate（{Counter:count.text（）}{
持续时间：5000，
“线性”，
步骤：函数（）{
count.text（Math.ceil（this.Counter）+“%”；
}
});
body{text align:center；字体系列：'Open Sans'，Sans serif；}
svg{width:25%；}

100%
演示：

下面是我获取百分比圆指示器的尝试：

路径绘制了两个拱门，我设置了笔划数组。
我们实际上不需要设置dasharray，因为我们稍后会使用javascript设置它


Html

<svg class="circles" viewbox="0 0 200 200">
  <g id="first">
    <circle r="50" cx="100" cy="100" fill="#fb0"/>
    <path fill="none" 
          stroke-linecap="round"
          stroke-width="7" 
          stroke="#ffa"
          stroke-dasharray="250,250"
          d="M100 60 
             A1 1 0 0 1 100 140
             A1 1 0 0 1 100 60"/>
    <text class="circ-text"
          text-anchor="middle"
          x="100" y="100"
          font-size="12px"
          fill="#ffa"
          >percentage
    </text>
  </g>
</svg>


var path=document.querySelector（'first path'）；
var text=document.querySelector（“#first.circ text”）；
var length=path.getTotalLength（）；
var i=0；
var计数=0；
var=50；
setInterval（函数（）{
如果（i<长度+长度/刻度）{
setAttribute（'stroke-dasharray'，i+“，”+长度）；
i+=长度/刻度；
text.innerHTML=Math.round（（count++/ticks）*100）；
}
}, 100);

百分比
纯HTML/CSS解决方案

简而言之，我使用CSS
边界半径
和
z-index
属性创建了一个白色的半圆形，它位于橙色的中心圆和橙色的外环下面。最初，半圆完全隐藏在左侧的另一层橙色后面，但随着它围绕中心轴旋转（通过CSS
transform:rotate（）
），它的外边缘逐渐显露出来，从而创建了进度条的外观。一旦进度条通过中间点，就需要额外的技巧（更多信息请参见下面的代码片段）

所有这些都是用纯HTML和CSS完成的，除了使用JavaScript的动画。与基于SVG的解决方案相比，它似乎需要更多的代码，但标记实际上要简单得多，这在我看来是一个很好的替代方案


函数设置进度（元素，百分比）{
变量
度=百分比*3.6，
transform=/MSIE 9/.test（navigator.userAgent）？'msTransform'：'transform'；
elem.querySelector（'.counter'）.setAttribute（'data-percent'，Math.round（percent））；
元素查询选择器（'.progressEnd'）。样式[变换]='旋转（'+degrees+'deg'）；
元素查询选择器（'.progress'）。样式[transform]='rotate（'+degrees+'deg'）；
如果（百分比>=50&&！/（^ |\s）五个字节（\s |$）/.test（elem.className））
elem.className+='fiftyPlus'；
}
（功能（）{
变量
elem=document.querySelector（'.circlePercent'），
百分比=0；
（函数animate（）{
setProgress（要素（百分比+=0.25））；
如果（百分比<100）
设置超时（动画，15）；
})();
})();
.circlePercent{
位置：相对位置；
顶部：26px；
左：26px；
宽度：96px；
高度：96px；
边界半径：50%；
背景：橙色；
}
.circlePercent:之前，
.circlePercent>.progressEnd{
位置：绝对位置；
z指数：3；
顶部：2个；
左：45像素；
宽度：6px；
高度：6px；
边界半径：50%；
背景：白色；
-ms转换原点：3px46px；
变换原点：3px46px；
内容：“；
}
.循环百分比：之后，
.circlePercent>.progress{
位置：绝对位置；
-ms转换原点：48px 48px；
变换原点：48px 48px；
z指数：0；
排名：0；
左：0；
宽度：48px；
高度：96px；
边界半径：48px 0 48px；
背景：橙色；
内容：“；
}
.circlePercent.fiftyPlus:之后{
背景：白色；
-ms变换：旋转（180度）；
变换：旋转（180度）；
}
.circlePercent>.progress.progress{
背景：白色；
}
.circlePercent>.counter{
位置：绝对位置；
框大小：边框框；
z指数：2；
宽度：100px；
高度：100px；
页边顶部：-2px；
左边距：-2px；
边界半径：50%；
边框：4倍纯色橙色；
}
.circlePercent>.counter:之前{
位置：绝对位置；
z指数：1；
最高：50%；
边缘顶部：-13px；
宽度：100%；
高度：26px；
字号：26px；
线高：26px；
字体系列：无衬线；
文本对齐：居中；
颜色：白色；
内容：属性（数据百分比）“%”；
}
.circlePercent>.counter:之后{
位置：绝对位置；
宽度：80px；
高度：80px；
顶部：6px；
左：6px；
边界半径：50%；
背景：橙色；
内容：“；
}
.circlePercent>.counter[数据百分比=“100”]{
背景：白色；
}
循环百分比使用画布的进度条



var ctx=document.getElementById（'circularLoader'）.getContext（'2d'）；
var-al=0；
var start=4.72；
var cw=ctx.canvas.width；
var ch=ctx.canvas.height；
var-diff；
函数progressSim（）{
微分=（（al/100）*数学PI*2*10.toFixed（2）；
ctx.clearRect（0，0，cw，ch）；
ctx.lineWidth=17；
ctx.fillStyle='#4285f4'；
ctx.strokeStyle=“#4285f4”；
ctx.textAlign=“中心”；
ctx.font=“28px monospace”；
ctx.fillText（al+'%'，cw*.52，ch*.5+5，cw+12）；
ctx.beginPath（）；
ctx.arc（100,100,75，启动，差异/10+启动，错误）；
ctx.stroke（）；
如果（al>=100）{
清除超时（sim）；
//在此处添加将在进度完成时运行的脚本
}
al++；
}
var sim=设定间隔（progressSim，50）

我还没有任何代码：）看看这个，只需下载CSS和HTML，不要用图像构建圆圈。这很容易用CSS完成。这看起来真的很整洁。但由于某些原因，动画在我的电脑上不起作用
var path = document.querySelector('#first path');
var text = document.querySelector('#first .circ-text');
var length = path.getTotalLength();
var i = 0;
var count = 0;
var ticks = 50;
setInterval(function() {
  if (i < length+length/ticks) {
    path.setAttribute('stroke-dasharray', i+","+length);
    i+=length/ticks;
    text.innerHTML=Math.round((count++/ticks)*100);
  }

}, 100);