如何使用CSS創建此圓形進度條甚至可能(兼容IE10 +,FF,鉻,Safari等)?
我想我們可以使用SVG,但我不知道如何做到這一點。圓形邊框進度條
在圓周圍有一個根據進度百分比動態變化的小邊框或陰影。如果百分比是100%,則邊框將完整地圍繞填充進度條的圓圈。
如何使用CSS創建此圓形進度條甚至可能(兼容IE10 +,FF,鉻,Safari等)?
我想我們可以使用SVG,但我不知道如何做到這一點。圓形邊框進度條
在圓周圍有一個根據進度百分比動態變化的小邊框或陰影。如果百分比是100%,則邊框將完整地圍繞填充進度條的圓圈。
這圈進度條是適用的形式這樣的回答:circular progress bar
它使用SVG與Snap.svg動畫計數器的藍色筆畫和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;background:#080808;}
svg{width:30%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
<path id="progress" stroke-width="3" stroke="#4596AB" fill="none"
d="M50 10
a 40 40 0 0 1 0 80
a 40 40 0 0 1 0 -80">
</path>
<circle cx="50" cy="50" r="38" fill="transparent" stroke="#fff" stroke-width="1"/>
<text id="count" x="50" y="50" fill="#fff" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>
太棒了!這很完美,就像我想要的一樣。非常感謝! – kazou
我認爲網站:https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.2fflbvwrt可以幫你
而且你可以在這裏檢查演示:http://jsfiddle.net/andsens/Yns9P/在這一行:
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100));
}
您可以更改attr('data-progress', Math.floor(Math.random() * 100))
到attr('data-progress', [your_pourcentage])
你能請提供一些你的手試過的代碼? – Draval