Javascript 跨浏览器圆形进度条
我正在尝试制作一个类似于所看到的圆形进度条 这个jQuery插件正是我想要实现的,问题是它不像velocity.js那样跨浏览器 我已经查看了其他来源,例如:Javascript 跨浏览器圆形进度条,javascript,jquery,css,animation,velocity.js,Javascript,Jquery,Css,Animation,Velocity.js,我正在尝试制作一个类似于所看到的圆形进度条 这个jQuery插件正是我想要实现的,问题是它不像velocity.js那样跨浏览器 我已经查看了其他来源,例如: 我之所以回答这个问题,是因为我一直在关注这个问题,如果您正在关注跨浏览器解决方案,您应该参考此链接: HTML: 另外:旋钮JS将是一个很好的选择 $(函数(){ $(“.dial”).knob(); }); 请查看可以将旋钮用作计时器的示例。是的,我以前去过该链接;我不知道如何用它来演示圆上的百分比,你介意进一步详细说
我之所以回答这个问题,是因为我一直在关注这个问题,如果您正在关注跨浏览器解决方案,您应该参考此链接: HTML: 另外:旋钮JS将是一个很好的选择
$(函数(){
$(“.dial”).knob();
});
请查看可以将旋钮用作计时器的示例。是的,我以前去过该链接;我不知道如何用它来演示圆上的百分比,你介意进一步详细说明吗?@MarkTHarris,这取决于你试图实现的目标,使用动画关键帧+较少或sass,你可以这样做@MarkTHarris你可以使用JS来计算你的百分比,并将值发送到关键帧值。@MarkTHarris也可以检查knob.jsHmm我以前见过knob.JS,看起来它会工作,但是你如何使用css和动画关键帧来做呢?这似乎是一个更干净的方法。
$("div").velocity(
{
rotateZ: 360
},
{
easing: [ 60 ],
duration: 30000
});
<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>
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<input type="text" value="75" class="dial">
<script>
$(function() {
$(".dial").knob();
});
</script>