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を持っています。