ul#progress {
    list-style: none;
    width: 140px;
    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;
    };
}

.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;
}
        
.trigger:hover, .triggerFull:hover, .triggerBar:hover {
    background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
    background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}