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);
型
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);
6条答案
按热度按时间fumotvh31#
考虑到进度条的形状(圆形结束/开始),我建议使用SVG。
DEMO:Radial progress bar
x1c 0d1x的数据
在下面的例子中,进度是用
stroke-dasarray
属性动画化的,%数字是用jQuery递增的:不幸的是,IE不支持svg SMIL动画。要实现与IE支持相同的结果,您可以使用像snap.svg这样的库,并使用JS动画
stroke-dasharray
属性:x
的一个字符串
tyu7yeag2#
纯HTML/CSS解决方案
简而言之,我使用CSS
border-radius
和z-index
属性创建了一个白色半圆,它位于一个橙子中心圆和一个橙子外环的下面。最初,半圆完全隐藏在左侧的一个额外的橙子层后面,但随着它围绕中心轴旋转,它的外边缘逐渐显露出来(通过CSStransform: rotate()
),创建进度条的外观。一旦进度条通过中点,就需要额外的技巧(请参阅下面的片段以获取更多信息)。所有这些都是用纯HTML和CSS完成的,除了动画,它使用JavaScript。它可能看起来比基于SVG的解决方案需要更多的代码,但标记实际上要简单得多,这使它成为一个很好的替代品。
请注意,当进度条到达中间点时,
fiftyPlus
类被添加到容器元素中。这将在圆的右半部分添加一个静态进度条。如果没有它,进度将从右侧流出,而不是填充左侧。wb1gzix03#
Demo:CODEPEN
以下是我尝试获得百分比圆指标的尝试:
Path画了两个拱门,我设置了stroke-dasharray。我们不需要设置dasharray,因为我们稍后用JavaScript设置。
Html
字符串
1.使用
#first path
获取路径。1.获取破折号数组的长度:
path.getTotalLength();
1.增加虚线数组直到其满:
setAttribute('stroke-dasharray', i+","+length);
其中i增加。1.了解我们的百分比:
(count++/ticks)*100
1.将百分比添加到svg文本:
text.innerHTML=(count/tick)*100
型
的字符串
yacmzcpb4#
循环百分比进度条使用 * 画布 *.
x1c 0d1x的数据
个字符
查看演示:-http://codingflag.in/mysketch.php?sketch=9
mbzjlibv5#
你试过这个吗?
字符串
bybem2ql6#
我创建了自己的生成器,你可以配置data-* 值,JavaScript将生成它。
https://github.com/danzzeu/css3/tree/main/css3_circle_percent
DEMO的
字符串