AJAx Loader #2
A modification of the loader a posted a few days ago
<div id="container">
<div id="container">
<div id="spinner" class="active">
<span id="ball_1" class="spinner_ball"></span>
<span id="ball_2" class="spinner_ball"></span>
<span id="ball_3" class="spinner_ball"></span>
<span id="ball_4" class="spinner_ball"></span>
<span id="ball_5" class="spinner_ball"></span>
</div>
</div>
#container {
#container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: black;
}
#spinner.active {
display: block;
}
#spinner {
display: none;
position: absolute;
height: 60px;
width: 60px;
top: 40%;
left: 48%;
z-index: 1;
}
.spinner_ball {
position: absolute;
display: block;
background-color: white;
left: 24px;
width: 4px;
height: 4px;
border-radius: 2px;
}
#ball_1 {
animation-timing-function: cubic-bezier(0.7, 0.3, 0.7, 0.9);
animation-name: rotate;
animation-duration: .6s;
animation-iteration-count: infinite;
transform-origin: 6px 30px;
}
#ball_2 {
animation-timing-function: cubic-bezier(0.6, 0.4, 0.6, 0.9);
animation-name: rotate;
animation-duration: .6s;
animation-iteration-count: infinite;
transform-origin: 6px 30px;
}
#ball_3 {
animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.9);
animation-name: rotate;
animation-duration: .6s;
animation-iteration-count: infinite;
transform-origin: 6px 30px;
}
#ball_4 {
animation-timing-function: cubic-bezier(0.4, 0.6, 0.4, 0.9);
animation-name: rotate;
animation-duration: .6s;
animation-iteration-count: infinite;
transform-origin: 6px 30px;
}
#ball_5 {
animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 0.9);
animation-name: rotate;
animation-duration: .6s;
animation-iteration-count: infinite;
transform-origin: 6px 30px;
}
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(360deg) scale(1);
}
}