跨浏览器圆形进度条答案

【问题标题】：Cross Browser Circle Progress Bar跨浏览器圆形进度条
【发布时间】：2014-11-02 12:37:36
【问题描述】：

我正在尝试制作一个类似于 here 的圆形进度条。

这个 jQuery 插件正是我希望能够完成的，但问题是它不像velocity.js 那样跨浏览器。

我查看了其他来源，例如：

example #1
example #2

 $("div").velocity(
    { 
      rotateZ: 360
    },
    { 
      easing: [ 60 ],
      duration: 30000
    });

【问题讨论】：

标签： javascript jquery css animation velocity.js

【解决方案1】：

我回答这个问题是因为我一直在关注这个问题，如果你在寻求跨浏览器解决方案，你应该参考这个链接：

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;
  }
}

Demo

另外：Knob JS 将是一个不错的选择

http://anthonyterrien.com/knob/

<input type="text" value="75" class="dial">

<script>
    $(function() {
        $(".dial").knob();
    });
</script>

查看可以将旋钮用作计时器的示例。

【讨论】：

是的，我以前去过那个链接；我不知道如何用它来显示圆圈上的百分比，您介意进一步详细说明吗？
@MarkTHarris 取决于您要实现的目标，使用动画关键帧 + less 或 sass ，您可以做到w3schools.com/css/tryit.asp?filename=trycss3_animation3
@MarkTHarris 您可以使用 JS 计算您的百分比并将该值发送为关键帧值。
@MarkTHarris 也检查了knob.js
嗯，我以前见过knob.js，它似乎可以工作，但是你将如何使用css和动画关键帧来做到这一点？这似乎是一种更清洁的方式。