跨瀏覽器圓進度條

Question

我正在嘗試使Circle進度條看起來很像here。

這個jQuery插件正是我希望能夠完成的問題是它不像velocity.js那樣是跨瀏覽器。

我已經看過其他來源，如：

1. example #1
2. example #2

3. example #3

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

Answer 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

另外：旋鈕JS將是一個不錯的選擇

http://anthonyterrien.com/knob/

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

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

檢查，你可以使用旋鈕時，計時器的例子。