Gmail進度條css代碼問題

Question

我想要做一個像Gmail一樣使用的進度條，所以我在這個網頁上發現了一些代碼：http://cssdeck.com/labs/new-gmail-styled-progress-bar，不幸的是進度條只顯示在Internet Explorer中，但不是Google chrome和Mozilla Firefox。我曾嘗試使用古代版本的Google Chrome（版本41），並且工作正常。如果有人能幫助我，我會非常感激。

CSS：

.loader_box { 
    text-align: center; 
    width: 320px; 
    border: 1px solid #999; 
    padding: 1px; 
    height: 8px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.loader { 
    width: 0; 
    height: 100%; 
    background-color: #6188F5; 
    background-repeat: repeat-x; 
    background-position: 0 0; 
    /*background-size*/ 
    -webkit-background-size: 16px 8px; 
    -moz-background-size: 16px 8px; 
    -o-background-size: 16px 8px; 
    background-size: 16px 8px; 
    background-image: -webkit-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    background-image: -moz-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    background-image: -o-linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    background-image: linear-gradient(315deg,transparent,transparent 33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent 66%,transparent); 
    /*animation*/ 
    -webkit-animation: load 5s linear 0 infinite; 
    -moz-animation: load 5s linear 0 infinite; 
    -ms-animation: load 5s linear 0 infinite; 
    -o-animation: load 5s linear 0 infinite; 
    animation: load 5s linear 0 infinite; 
} 
/* Then animate the stuff */ 
@-webkit-keyframes load { 
    0% { width: 0% ; 
     background-position:0 0;} 
    100% { width: 100%; 
      background-position:-40px 0; 
      } 
} 
@-ms-keyframes load { 
    0% { width: 0% ; 
     background-position:0 0;} 
    100% { width: 100%; 
      background-position:-40px 0; 
      } 
} 
@-o-keyframes load { 
    0% { width: 0% ; 
     background-position:0 0;} 
    100% { width: 100%; 
      background-position:-40px 0; 
      } 
} 
@keyframes load { 
    0% { width: 0% ; 
     background-position:0 0;} 
    100% { width: 100%; 
      background-position:-40px 0; 
      } 
} 

HTML：

<div class="loader_box"> 
    <div class="loader"></div> 
</div> 

的JavaScript：

<script> 
var displayLoaderCount =  0; 

function printMsg(message, clearQueue){ 
    displayLoaderCount--; 

    if (!message || displayLoaderCount < 0){ 
     message = "An error occured"; 
     displayLoaderCount=0; 
    } 

    if (clearQueue){ 
     displayLoaderCount=0; 
    } 

    if (displayLoaderCount==0){ 
     $(".loader_box").hide(); 

     $("input").prop("disabled", false); 
     $("button").prop("disabled", false); 
     $("select").prop("disabled", false); 
     $("div").prop("disabled", false); 
     $(".message-section").html(message).fadeIn("slow", function(){}).delay(5000).fadeOut("slow",function() {}); 
     $(".credits-section").hide().delay(5700).fadeIn("slow",function() {}); 
    }else{ 
     $(".message-section").html(message).fadeIn("slow", function(){}); 
     $(".credits-section").hide(); 
    } 
} 


function displayLoading(){ 
    $(".loader_box").show(); 
    displayLoaderCount++; 
    $("input").prop("disabled", true); 
    $("button").prop("disabled", true); 
    $("select").prop("disabled", true); 
    $("div").prop("disabled", true); 
} 
</script> 

Answer 1

我相信我已經找到了一種方法，使其工作;雖然我不知道爲什麼！

我所做的只是從.loader的-webkit-animation中刪除0。 （CSS的第37行），即：

舊版本： -webkit-animation: load 5s linear 0 infinite;

新版本：-webkit-animation: load 5s linear infinite;

http://cssdeck.com/labs/cufgituy

如果有人有興趣，W3C的標準在這裏提供：

http://www.w3.org/TR/css3-animations/#animation