web*_*iki 64
考虑到进度条的形状(圆形末端/开始),我建议使用SVG.
演示:径向进度条
在以下示例中,使用stroke-dasarray属性为进度设置动画,并使用jQuery递增%数字:
var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
duration: 5000,
easing: 'linear',
step: function () {
count.text(Math.ceil(this.Counter)+ "%");
}
});body{text-align:center;font-family: 'Open Sans', sans-serif;}
svg{width:30%;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
stroke-dasharray="251.2,0"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
<animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>
</path>
<text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>不幸的是,IE不支持svg SMIL动画.要在IE支持下获得相同的结果,您可以使用像snap.svg这样的库,并stroke-dasharray使用JS 为该属性设置动画:
var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
duration: 5000,
easing: 'linear',
step: function () {
count.text(Math.ceil(this.Counter)+ "%");
}
});
var s = Snap('#animated');
var progress = s.select('#progress');
progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);body{text-align:center;font-family:sans-serif;}
svg{width:30%;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="svg" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
stroke-dasharray="1,250.2"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80"/>
<text x="50" y="50" text-anchor="middle" dy="7" font-size="20">1%</text>
</svg>
<svg viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
stroke-dasharray="125.6,125.6"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80"/>
<text x="50" y="50" text-anchor="middle" dy="7" font-size="20">50%</text>
</svg>
<svg id="animated" viewbox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#FDB900"/>
<path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<text id="count" x="50" y="50" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>- @AlvaroMontoro不幸的是,IE不支持svg SMIL动画.但是你可以使用像snap.svg这样的库来实现相同的结果http://codepen.io/web-tiki/pen/qEGvMN?editors=101这适用于最新的FF,chrome和IE. (2认同)
Doc*_*cto 18
纯HTML/CSS解决方案
简而言之,我使用CSS border-radius和z-index属性创建了一个分布在橙色中心圆和橙色外环下方的白色半圆.最初,半圆完全隐藏在左侧的附加橙色层后面,但是当它围绕中心轴旋转时(通过CSS transform: rotate()),其外边缘逐渐显露出来,从而创建了进度条的外观.进度条通过中途点后需要额外的技巧(有关详细信息,请参阅下面的代码段).
所有这些都是使用纯HTML和CSS完成的,除了使用JavaScript的动画.它似乎需要比基于SVG的解决方案更多的代码,但标记实际上要简单得多,这使得它在我看来是一个很好的选择.
function setProgress(elem, percent) {
var
degrees = percent * 3.6,
transform = /MSIE 9/.test(navigator.userAgent) ? 'msTransform' : 'transform';
elem.querySelector('.counter').setAttribute('data-percent', Math.round(percent));
elem.querySelector('.progressEnd').style[transform] = 'rotate(' + degrees + 'deg)';
elem.querySelector('.progress').style[transform] = 'rotate(' + degrees + 'deg)';
if(percent >= 50 && !/(^|\s)fiftyPlus(\s|$)/.test(elem.className))
elem.className += ' fiftyPlus';
}
(function() {
var
elem = document.querySelector('.circlePercent'),
percent = 0;
(function animate() {
setProgress(elem, (percent += .25));
if(percent < 100)
setTimeout(animate, 15);
})();
})();.circlePercent {
position: relative;
top: 26px;
left: 26px;
width: 96px;
height: 96px;
border-radius: 50%;
background: orange;
}
.circlePercent:before,
.circlePercent > .progressEnd {
position: absolute;
z-index: 3;
top: 2px;
left: 45px;
width: 6px;
height: 6px;
border-radius: 50%;
background: white;
-ms-transform-origin: 3px 46px;
transform-origin: 3px 46px;
content: "";
}
.circlePercent:after,
.circlePercent > .progress {
position: absolute;
-ms-transform-origin: 48px 48px;
transform-origin: 48px 48px;
z-index: 0;
top: 0;
left: 0;
width: 48px;
height: 96px;
border-radius: 48px 0 0 48px;
background: orange;
content: "";
}
.circlePercent.fiftyPlus:after {
background: white;
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.circlePercent > .progress.progress {
background: white;
}
.circlePercent > .counter {
position: absolute;
box-sizing: border-box;
z-index: 2;
width: 100px;
height: 100px;
margin-top: -2px;
margin-left: -2px;
border-radius: 50%;
border: 4px solid orange;
}
.circlePercent > .counter:before {
position: absolute;
z-index: 1;
top: 50%;
margin-top: -13px;
width: 100%;
height: 26px;
font-size: 26px;
line-height: 26px;
font-family: sans-serif;
text-align: center;
color: white;
content: attr(data-percent) "%";
}
.circlePercent > .counter:after {
position: absolute;
width: 80px;
height: 80px;
top: 6px;
left: 6px;
border-radius: 50%;
background: orange;
content: "";
}
.circlePercent > .counter[data-percent="100"] {
background: white;
}<div class="circlePercent">
<div class="counter" data-percent="0"></div>
<div class="progress"></div>
<div class="progressEnd"></div>
</div>请注意,fiftyPlus一旦进度条到达中间点,该类就会添加到容器元素中.这会在圆的右半部分添加一个静态进度条.没有它,进展似乎会从右侧排出,而不是填入左侧.
Per*_*ijn 10
演示:CODEPEN
这是我尝试获取百分比圆圈指标:
Path绘制两个拱门,我设置了stroke-dasharray.我们真的不需要设置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>
Javascirpt
- 获取路径
#first path. - 获取dash-array的长度:
path.getTotalLength(); - 增加破折号阵列直到它满:
setAttribute('stroke-dasharray', i+","+length);我增加了. - 找出我们的百分比:
(count++/ticks)*100 - 将百分比添加到svg文本:
text.innerHTML=(count/tick)*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);
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);<svg class="circles" viewbox="0 0 500 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>小智 6
使用Canvas的圆形百分比进度条...
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;
function progressSim(){
diff = ((al / 100) * Math.PI*2*10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 17;
ctx.fillStyle = '#4285f4';
ctx.strokeStyle = "#4285f4";
ctx.textAlign = "center";
ctx.font="28px monospace";
ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12);
ctx.beginPath();
ctx.arc(100, 100, 75, start, diff/10+start, false);
ctx.stroke();
if(al >= 100){
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 50);<div id="loader">
<canvas id="circularLoader" width="200" height="200"></canvas>
</div>参见演示: - http://codingflag.in/mysketch.php?sketch=9