google style loading progress bar using css3

google gmail style loading progressbar using css3

.loading {
    text-align: center;
    width: 320px;
    border: 1px solid #999;
    padding: 1px;
    height: 8px;
    margin-right: auto;
    margin-left: auto;
}
#progress {
    width: 40%;
    height: 100%;
    background-color: #6188F5;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: 16px 8px;
    background-image: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0));
    background-image: linear-gradient(315deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.12) 33%, rgba(0, 0, 0, 0.12) 66%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0));
    -webkit-animation: pb 0.8s linear 0 infinite;
}
@-webkit-keyframes pb { 0% { background-position:0 0; } 100% { background-position:-16px 0; } }