Html/CSS中可自定義的進度條

Question

我想使用HTML和CSS在鏈接中創建進度條。不知道如何去做。任何幫助？

Answer 1

盡我所能找到...

<style type="text/css"> 

#layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } 
#layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } 
#layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } 
#layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } 
#layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } 

#layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } 
#layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } 
#layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } 
#layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } 
#layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } 

@-moz-keyframes loading { 
    0%{-moz-transform:scale(0,0);} 
    100%{-moz-transform:scale(1,1);} 
} 

@-webkit-keyframes loading { 
    0%{-webkit-transform:scale(0,0);} 
    100%{-webkit-transform:scale(1,1);} 
} 


@-moz-keyframes pulse { 
    0% {-moz-transform: scale(0);opacity: 0;} 
    10% {-moz-transform: scale(1);opacity: 0.5;} 
    50% {-moz-transform: scale(1.75);opacity: 0;} 
    100% {-moz-transform: scale(0);opacity: 0;} 
} 

@-webkit-keyframes pulse { 
    0% {-webkit-transform: scale(0);opacity: 0;} 
    10% {-webkit-transform: scale(1);opacity: 0.5;} 
    50% {-webkit-transform: scale(1.75);opacity: 0;} 
    100% {-webkit-transform: scale(0);opacity: 0;} 
} 

/* Loader Bar */ 

ul#loadbar { 
    list-style:none; 
    width:140px; 
    margin:0 auto; 
    padding-top:50px; 
    padding-bottom:75px; 
    margin-left: 530px; 
} 
ul#loadbar li { 
    float:left; 
    position:relative; 
    width:11px; 
    height:26px; 
    margin-left:1px; 
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    background:#000; 
} 

ul#loadbar li:first-child { margin-left:0; } 

.ins .bar { 
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(45deg, #7ec0ee 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(45deg, #7ec0ee 25%, #a0eaff); 
    width:11px; 
    height:26px; 
    opacity:0; 
    -webkit-animation:fill .5s linear forwards; 
    -moz-animation:fill .5s linear forwards; 
} 

#layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } 
#layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } 
#layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } 
#layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } 
#layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } 
#layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } 
#layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } 
#layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; } 
#layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; } 
#layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; } 

@-moz-keyframes fill { 
    0%{ opacity:0; } 
    100%{ opacity:1; } 
} 

@-webkit-keyframes fill { 
    0%{ opacity:0; } 
    100%{ opacity:1; } 
} 

/* Trigger button for javascript */ 

.trigger, .triggerFull, .triggerBar { 
    background: #000000; 
    background: -moz-linear-gradient(top, #161616 0%, #000000 100%); 
    background: -webkit-linear-gradient(top, #161616 0%,#000000 100%); 
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 0.8em; 
    text-decoration: none; 
    text-transform: lowercase; 
    text-align: center; 
    color: #fff; 
    padding: 10px; 
    border-radius: 3px; 
    display: block; 
    margin: 0 auto; 
    width: 140px; 
} 



</style> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script> 
<script> 


$(document).ready(function() { 
    $('#loadbar').removeClass('ins'); 
     $('.triggerBar').click(function() { 
      $('#loadbar').removeClass('ins').delay(10).queue(function(next){ 
       $(this).addClass('ins'); 
       next(); 
      }); 
      return false; 
     }); 
}); 
</script> 

<div class="container"> 
    <ul id="loadbar"> 
    <li><div id="layerFill1" class="bar"></div></li> 
    <li><div id="layerFill2" class="bar"></div></li> 
    <li><div id="layerFill3" class="bar"></div></li> 
    <li><div id="layerFill4" class="bar"></div></li> 
    <li><div id="layerFill5" class="bar"></div></li> 
    <li><div id="layerFill6" class="bar"></div></li> 
    <li><div id="layerFill7" class="bar"></div></li> 
    <li><div id="layerFill8" class="bar"></div></li> 
    <li><div id="layerFill9" class="bar"></div></li> 
    <li><div id="layerFill10" class="bar"></div></li> 
    </ul> 
<a class="triggerBar" href="#">Start/Restart Animation</a> 
</div> 

Answer 2

你有谷歌這將花費更少的時間來尋找答案.. https://css-tricks.com/html5-progress-element/ 或 http://www.w3schools.com/w3css/w3css_progressbar.asp可以幫助你。