Html 用 css 动画旋转圆（百分比）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21198005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate spinning circle(percentage) with css
提问by sindrem
How can i make the spinning circles which is on the following site http://www.awwwards.com/
我如何制作以下网站上的旋转圈http://www.awwwards.com/
For my site i don't need it to be dynamic. At least not this time. I have tried out different solutions, with both Javascript and CSS, but i'm not sure what is the best method to create this.
对于我的网站，我不需要它是动态的。至少这次不是。我已经尝试了不同的解决方案，包括 Javascript 和 CSS，但我不确定创建它的最佳方法是什么。
-moz-transform: rotate(270);
-webkit-transform: rotate(270);
-o-transform:rotate(270deg);
transform: rotate(270deg);
transition: all 2s;
This is pretty much all i know about transitions, but i guess its enough. However, i would have to have my "pie" of the cake cut out before the transition start, right?
这几乎是我对转换的全部了解，但我想这已经足够了。但是，我必须在过渡开始之前切出蛋糕的“馅饼”，对吗？
Anyone know where i should start?
有谁知道我应该从哪里开始？
回答by Itay Gal
You can read this article and see a working example and even understand how it works css-pie-timer
你可以阅读这篇文章并查看一个工作示例，甚至了解它是如何工作的css-pie-timer
UPDATE
更新
I didn't like that solution so I tried to implement it my self and with a little help (I asked few questions here) I manage to do it pretty elegant.
我不喜欢那个解决方案，所以我尝试自己实现它，并在一些帮助下（我在这里问了几个问题）我设法做得非常优雅。
The main idea is to understand how to draw a circle sector and then start drawing section with degree = 0 until you reach degree you want.
主要思想是了解如何绘制圆形扇区，然后以度数 = 0 开始绘制截面，直到达到您想要的度数。
I also made it reversible, just for fun :).
我也让它可逆，只是为了好玩:)。
HTML
HTML
<div class="container">
<div id="activeBorder" class="active-border">
<div id="circle" class="circle">
<span class="prec 270" id="prec">0%</span>
</div>
</div>
</div>
The active border will be replaced with the current percentage. The prec span will contains the textual percentage and also the total degrees you want (270) in this example. As I implemented it, the percentage needs to be the second class.
活动边框将替换为当前百分比。在此示例中， prec 跨度将包含文本百分比以及您想要的总度数 (270)。当我实施它时，百分比需要是第二类。
CSS
CSS
This is the tricky part. This is the tricky part. I draw the sector this way:
这是棘手的部分。这是棘手的部分。我这样绘制扇区：
.active-border{
position: relative;
text-align: center;
width: 110px;
height: 110px;
border-radius: 100%;
background-color:#39B4CC;
background-image:
linear-gradient(91deg, transparent 50%, #A2ECFB 50%),
linear-gradient(90deg, #A2ECFB 50%, transparent 50%);
}
Explanation: the first linear-gradientvalue will be the degrees shown + 90.
If the degrees is bigger than 180 we'll set the first linear-gradientcolor to our active color.
说明：第一个linear-gradient值将是显示的度数 + 90。如果度数大于 180，我们将第一个linear-gradient颜色设置为我们的活动颜色。
JQuery
查询
function loopit(dir){
// choose direction
if (dir == "c")
i++
else
i--;
// stop condition
if (i < 0)
i = 0;
if (i > degs)
i = degs;
// calculate and set the percentage text
prec = (100*i)/360;
$(".prec").html(Math.round(prec)+"%");
if (i<=180){
activeBorder.css('background-image','linear-gradient(' + (90+i) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
else{
activeBorder.css('background-image','linear-gradient(' + (i-90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
}
// recursive call
setTimeout(function(){
if($("#circle").is(":hover"))
loopit("c");
else
loopit("nc");
},1);
}
And here's a working demo
这是一个工作演示
NoteIt works for firefox and chrome. You'll have to add IE support for linear-gradient.
注意它适用于 Firefox 和 chrome。您必须添加 IE 对linear-gradient.
回答by Doug S
I liked Itay Gal's answer because of its simplicity, using only CSS and Javascript.
我喜欢 Itay Gal 的答案，因为它很简单，只使用 CSS 和 Javascript。
I was able to simplify it further, and also made it more of a real world example, so that it runs whenever the function is called (at startup or whenever you call it). Simply pass in the percentage number where you want it to stop.
我能够进一步简化它，并使它更像一个真实世界的例子，以便它在函数被调用时（在启动时或在你调用它时）运行。只需传入您希望它停止的百分比数字。
Works in all modern browsers, including IE10+. Degrades gracefully in older browsers.
适用于所有现代浏览器，包括 IE10+。在旧浏览器中优雅地降级。
JSFiddle demo: https://jsfiddle.net/ggj55sqo/
JSFiddle 演示：https://jsfiddle.net/ggj55sqo/
HTML
HTML
<div id="sellPerCirc" class="perCirc">
<div class="perCircInner">
<div class="perCircStat">0%</div><div>Complete</div>
</div>
</div>
CSS
CSS
.perCirc {
position: relative;
text-align: center;
width: 110px;
height: 110px;
border-radius: 100%;
background-color: #00cc00;
background-image: linear-gradient(91deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.perCirc .perCircInner {
position: relative;
top: 10px;
left: 10px;
text-align: center;
width: 90px;
height: 90px;
border-radius: 100%;
background-color: #eee;
}
.perCirc .perCircInner div {
position: relative;
top: 22px;
color:#777;
}
.perCirc .perCircStat {
font-size: 30px;
line-height:1em;
}
JQuery
查询
// change the value below from 80 to whichever percentage you want it to stop at.
perCirc($('#sellPerCirc'), 80);
function perCirc($el, end, i) {
if (end < 0)
end = 0;
else if (end > 100)
end = 100;
if (typeof i === 'undefined')
i = 0;
var curr = (100 * i) / 360;
$el.find(".perCircStat").html(Math.round(curr) + "%");
if (i <= 180) {
$el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
} else {
$el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
}
if (curr < end) {
setTimeout(function () {
perCirc($el, end, ++i);
}, 1);
}
}
