Progress Bars

Alessio Atzeni http://www.alessioatzeni.com/blog/css3-loading-animation/

HTML

<span id="reload"></span>
<div id="title"><a>CSS3 Loading Animation</a></div>
<div id="credit"><a href="http://www.alessioatzeni.com/blog/css3-loading-animation/" target="_blank">Alessio Atzeni</a></div>
    
<ul id="progress">
    <li>
        <div id="layer1" class="ball"></div> <!-- layer1 control delay animation / ball is effect -->
        <div id="layer7" class="pulse"></div> <!-- layer7 control delay animation / pulse is effect  -->
    </li>
    <li>
        <div id="layer2" class="ball"></div>
        <div id="layer8" class="pulse"></div>
    </li>
    <li>
        <div id="layer3" class="ball"></div>
        <div id="layer9" class="pulse"></div>
    </li>
    <li>
        <div id="layer4" class="ball"></div>
        <div id="layer10" class="pulse"></div>
    </li>
    <li>
        <div id="layer5" class="ball"></div>
        <div id="layer11" class="pulse"></div>
    </li>
</ul>

<div id="content">
    <span class="expand"></span>
</div>

<ul id="loadbar">
    <li>
        <div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  -->
    </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>

CSS

/* PROGRESS BAR */
body {
    background: #222 url(http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Loading-Animation/pattern_40.gif) repeat center;
    margin: 0px;
    padding: 0px;
    font-family: 'Helvetica Neue', Helvetica, Arial;
    font-size: 75%;
}
#title {
    text-align: center;
    font-size: 2em;
    text-shadow: #000 0px -1px 1px;
    margin-top: 40px;
}
#credit {text-align: center;}
a {color: #888;text-decoration: none;}
a:hover {text-decoration: underline;
}

/***********************************/
/***********************************/

ul#progress {
    list-style:none;
    width:125px;
    margin:0 auto;
    padding-top:50px;
    padding-bottom:50px;
}

ul#progress li { /* Style your list */
    float:left;
    position:relative;
    width:15px;
    height:15px;
    border:1px solid #fff;
    border-radius:50px;
    margin-left:10px;
    border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; 
    background:#000;
}

ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */

.ball { /* Style your ball and set the animation */
    background-color:#2187e7; 
    background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); 
    background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); 

    width:15px;
    height:15px;
    border-radius:50px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -moz-animation:loading 1s linear forwards;
    -webkit-animation:loading 1s linear forwards;
}

.pulse { /* Style your second ball to create the amazing effects */
    width:15px;
    height:15px;
    border-radius:30px;
    border: 1px solid #00c6ff;
    box-shadow: 0 0 5px #00c6ff;
    position:absolute;
    top:-1px;
    left:-1px;
    -moz-transform:scale(0);
    -webkit-transform:scale(0);
    
    -webkit-animation:pulse 1s ease-out;
    -moz-animation:pulse 1s ease-out;
}

/* Control Layers */
#layer1 {...