<div class="spinner">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
<div class="ball ball-4"></div>
</div>
.spinner {
width: 30px;
height: 30px;
margin: 100px auto;
position:relative;
}
.ball {
height: 50px;
width: 50px;
left: 50%;
top: 50%;
background: rgba( 0, 255, 0, .5);
border-radius: 50%;
float: left;
position: absolute;
}
.ball-1 {
background: rgba( 255, 0, 0, .5);
top: 0;
left: 50%;
animation: ball1 1s 0s ease infinite;
z-index: 1;
}
.ball-2 {
background: rgba( 0, 255, 0, .5);
top: 50%;
left: 100%;
animation: ball2 1s 0s ease infinite;
z-index: 2;
}
.ball-3 {
background: rgba( 0, 0, 255, .5);
top: 100%;
left: 50%;
animation: ball3 1s 0s ease infinite;
z-index: 1;
}
.ball-4 {
background: rgba( 255, 255, 0, .5);
top: 50%;
left: 0%;
animation: ball4 1s 0s ease infinite;
z-index: 2;
}
@keyframes ball1 {
50% {
top: -100%;
left: 200%;
background: rgba( 127, 127, 0, .5);
}
100% {
top: 50%;
left: 100%;
background: rgba( 0, 255, 0, .5);
z-index: 2;
}
}
@keyframes ball2 {
50% {
top: 200%;
left: 200%;
background: rgba( 0, 255, 255, .5);
}
100% {
top: 100%;
left: 50%;
background: rgba( 0, 0, 255, .5);
z-index: 1;
}
}
@keyframes ball3 {
50% {
top: 200%;
left: -100%;
background: rgba( 255, 0, 255, .5);
}
100% {
top: 50%;
left: 0%;
background: rgba( 255, 255, 0, .5);
z-index: 2;
}
}
@keyframes ball4 {
50% {
top: -100%;
left: -100%;
background: rgba( 255, 127, 0, .5);
}
100% {
top: 0%;
left: 50%;
background: rgba( 255, 0, 0, .5);
z-index: 1;
}
}
Also see: Tab Triggers