CSS Loading Animation

HTML

<div class="table">
    <div class="table-cell">
        <div id="fountainG">
            <div id="fountainG_1" class="fountainG"></div>
            <div id="fountainG_2" class="fountainG"></div>
            <div id="fountainG_3" class="fountainG"></div>
            <div id="fountainG_4" class="fountainG"></div>
            <div id="fountainG_5" class="fountainG"></div>
            <div id="fountainG_6" class="fountainG"></div>
            <div id="fountainG_7" class="fountainG"></div>
            <div id="fountainG_8" class="fountainG"></div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}
.table {
    display: table;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
}
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
/* the horizontal bullet */
 #fountainG {
    margin: 0 auto;
    position:relative;
    width:240px;
    height:29px
}
.fountainG {
    position:absolute;
    top:0;
    background-color:#6daedf;
    width:16px;
    height:16px;
    -moz-animation-name:bounce_fountainG;
    -moz-animation-duration:1.3s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -moz-transform:scale(.5);
    -moz-border-radius:19px;
    -webkit-animation-name:bounce_fountainG;
    -webkit-animation-duration:1.3s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -webkit-transform:scale(.5);
    -webkit-border-radius:19px;
    -ms-animation-name:bounce_fountainG;
    -ms-animation-duration:1.3s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -ms-transform:scale(.5);
    -ms-border-radius:19px;
    -o-animation-name:bounce_fountainG;
    -o-animation-duration:1.3s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    -o-transform:scale(.5);
    -o-border-radius:19px;
    animation-name:bounce_fountainG;
    animation-duration:1.3s;
    animation-iteration-count:infinite;
    animation-direction:linear;
    transform:scale(.5);
    border-radius:19px;
}
#fountainG_1 {
    left:0;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}
#fountainG_2 {
    left:30px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}
#fountainG_3 {
    left:60px;
    -moz-animation-delay:0.78s;
   ...