-1
我正在尝试使Circle进度条看起来很像here。跨浏览器圆进度条
这个jQuery插件正是我希望能够完成的问题是它不像velocity.js那样是跨浏览器。
我已经看过其他来源,如:
- example #1
- example #2
-
$("div").velocity( { rotateZ: 360 }, { easing: [ 60 ], duration: 30000 });
我正在尝试使Circle进度条看起来很像here。跨浏览器圆进度条
这个jQuery插件正是我希望能够完成的问题是它不像velocity.js那样是跨浏览器。
我已经看过其他来源,如:
$("div").velocity(
{
rotateZ: 360
},
{
easing: [ 60 ],
duration: 30000
});
荫回答这个问题,因为我一直这个问题后,你应该参考这个链接如果你是跨浏览器解决方案后:
http://css-tricks.com/svg-line-animation-works/
HTML:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<path class="path" fill="#FFFFFF" stroke="#000000" stroke-width="4" stroke-miterlimit="10" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>
CSS:
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
另外:旋钮JS将是一个不错的选择
http://anthonyterrien.com/knob/
<input type="text" value="75" class="dial">
<script>
$(function() {
$(".dial").knob();
});
</script>
检查,你可以使用旋钮时,计时器的例子。
是的,我之前就去过那个环节;我无法弄清楚这将如何用于证明一个圈子的百分比,你是否介意进一步阐述? – MarkTHarris 2014-11-02 04:18:29
@MarkTHarris取决于你想实现什么,使用动画关键帧+ less或sass,你可以做到http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3 – ProllyGeek 2014-11-02 04:30:09
@MarkTHarris你可以使用JS计算您的百分比并发送该值作为关键帧值。 – ProllyGeek 2014-11-02 04:30:53