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 {
    -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;
    };
}

ul#loadbar {
    list-style: none;
    width: 140px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 75px;
}

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;
}

.bar {
    background-color: #2187e7;
    background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
    background-image: -webkit-linear-gradient(45deg, #2187e7 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;
    };
}