@charset "utf-8";

/* Loading Bar*/
/* .bar {
	font-size: 20px;
    width: 10em;
    height: 1em;
    position: relative;
    margin: 250px auto;
    border-radius: .5em;
    background: rgba(255,255,255,0.6);
    box-shadow: 
        0 0 0 .05em rgba(100,100,100,0.075),
        0 0 0 .25em rgba(0,0,0,0.1),
        inset 0 .1em .05em rgba(0,0,0,0.1),
        0 .05em rgba(255,255,255,0.7);
}

.bar:after {
    content: "Loading...";
    position: absolute;
    left: 33%;
    top: 150%;
    font-family: 'Carrois Gothic', sans-serif;
    font-size: 1em;
    color: #ffffff;
    text-shadow: 0 .05em rgba(255,255,255,0.7);
}

.bar .sphere {
    border-radius: 50%;
    width: 1em;
    height: 100%;
    background: -webkit-linear-gradient(#eee, #ddd);
    background: -moz-linear-gradient(#eee, #ddd);
    background: -ms-linear-gradient(#eee, #ddd);
    background: -o-linear-gradient(#eee, #ddd);
    background: linear-gradient(#eee, #ddd);
    box-shadow:
        inset 0 .15em .1em rgba(255,255,255,0.3),
        inset 0 -.1em .15em rgba(0,0,0,0.15),
        0 0 .25em rgba(0,0,0,0.3);
    display: block;
    -webkit-animation: slide 1.75s ease-in-out infinite alternate;
    -moz-animation: slide 1.75s ease-in-out infinite alternate;
    -ms-animation: slide 1.75s ease-in-out infinite alternate;
    -o-animation: slide 1.75s ease-in-out infinite alternate;
    animation: slide 1.75s ease-in-out infinite alternate;
}

@-webkit-keyframes slide {
    to { margin-left: 90%; }
}

@-moz-keyframes slide {
    to { margin-left: 90%; }
}

@-ms-keyframes slide {
    to { margin-left: 90%; }
}

@-o-keyframes slide {
    to { margin-left: 90%; }
}

@keyframes slide {
    to { margin-left: 90%; }
}
 */
 
 
 #circularG{
position:relative;
width:100px;
height:100px;
margin: 280px auto;
}

.circularG{
position:absolute;
background-color:#9999ff;
width:23px;
height:23px;
-moz-border-radius:15px;
-moz-animation-name:bounce_circularG;
-moz-animation-duration:0.64s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:15px;
-webkit-animation-name:bounce_circularG;
-webkit-animation-duration:0.64s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:15px;
-ms-animation-name:bounce_circularG;
-ms-animation-duration:0.64s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:15px;
-o-animation-name:bounce_circularG;
-o-animation-duration:0.64s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:15px;
animation-name:bounce_circularG;
animation-duration:0.64s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#circularG_1{
left:0;
top:39px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}

#circularG_2{
left:11px;
top:11px;
-moz-animation-delay:0.32s;
-webkit-animation-delay:0.32s;
-ms-animation-delay:0.32s;
-o-animation-delay:0.32s;
animation-delay:0.32s;
}

#circularG_3{
top:0;
left:39px;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}

#circularG_4{
right:11px;
top:11px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}

#circularG_5{
right:0;
top:39px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#circularG_6{
right:11px;
bottom:11px;
-moz-animation-delay:0.64s;
-webkit-animation-delay:0.64s;
-ms-animation-delay:0.64s;
-o-animation-delay:0.64s;
animation-delay:0.64s;
}

#circularG_7{
left:39px;
bottom:0;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#circularG_8{
left:11px;
bottom:11px;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}

@-moz-keyframes bounce_circularG{
0%{
-moz-transform:scale(1)}

100%{
-moz-transform:scale(.3)}

}

@-webkit-keyframes bounce_circularG{
0%{
-webkit-transform:scale(1)}

100%{
-webkit-transform:scale(.3)}

}

@-ms-keyframes bounce_circularG{
0%{
-ms-transform:scale(1)}

100%{
-ms-transform:scale(.3)}

}

@-o-keyframes bounce_circularG{
0%{
-o-transform:scale(1)}

100%{
-o-transform:scale(.3)}

}

@keyframes bounce_circularG{
0%{
transform:scale(1)}

100%{
transform:scale(.3)}

} - See more at: http://cssload.net/#sthash.pW4EfILB.dpuf