jQuery的：類似的負載效應來NProgess

Question

這是鏈接：http://ricostacruz.com/nprogress/

我已經產生了吧進步，它錯過了負載循環。

這是我發現它的代碼：

#progress-bar .peg { 
display: block; 
position: absolute; 
right: 0px; 
width: 100px; 
height: 100%; 
    box-shadow: 0 0 10px #29d, 0 0 5px #29d; 
    opacity: 1.0; 

    -webkit-transform: rotate(3deg) translate(0px, -4px); 
    -moz-transform: rotate(3deg) translate(0px, -4px); 
         -ms-transform: rotate(3deg) translate(0px, -4px); 
    -o-transform: rotate(3deg) translate(0px, -4px); 
    transform: rotate(3deg) translate(0px, -4px); 

而且格外，你怎麼加呢？ 因爲我在做類似的東西：提前

var $progressBarContainer = $('<div/>').attr('id', 'progress-bar-container'); 
    $progressBarContainer.append($('<div/>').attr('id', 'progress-bar')); 
    $progressBarContainer.appendTo($('body')); 

感謝您幫助

Answer 1

他們使用它，你在網站上提供的方式是非常簡單地做正確的方式。如果您需要幫助從網站減去微調代碼，我已經放在一起simple JSFiddle example for you。您應該能夠複製粘貼CSS代碼，並且只需更改spinner-div的內容即可。

，使旋轉的代碼是

-webkit-animation: spinner 400ms linear infinite; 
-moz-animation: spinner 400ms linear infinite; 
-ms-animation:  spinner 400ms linear infinite; 
-o-animation:  spinner 400ms linear infinite; 
animation:   spinner 400ms linear infinite; 

，然後將關鍵幀的每個瀏覽器。