<
style type="text/css">
.spinner
{<
br /> margin: 100px auto;<
br />
width: 20px;<
br />
height: 20px;<
br /> position: relative;<
br />
}<
br /> .container1 > div, .container2 > div, .container3 > div
{<
br />
width: 6px;<
br />
height: 6px;<
br /> background-
color: #ff66cc;<
br /> border-radius:
100%;<
br /> position: absolute;<
br /> -webkit-animation: bouncedelay 1.2s infinite ease-in-out;<
br /> animation: bouncedelay 1.2s infinite ease-in-out;<
br /> -webkit-animation-fill-mode: both;<
br /> animation-fill-mode: both;<
br />
}<
br /> .spinner .spinner-container
{<
br /> position: absolute;<
br />
width:
100%;<
br />
height:
100%;<
br />
}<
br /> .container2
{<
br /> -webkit-transform: rotateZ
(45deg
);<
br /> transform: rotateZ
(45deg
);<
br />
}<
br /> .container3
{<
br /> -webkit-transform: rotateZ
(90deg
);<
br /> transform: rotateZ
(90deg
);<
br />
}<
br /> .circle1
{<
br /> top:
0; left:
0;<
br />
}<
br /> .circle2
{<
br /> top:
0; right:
0;<
br />
}<
br /> .circle3
{<
br /> right:
0; bottom:
0;<
br />
}<
br /> .circle4
{<
br /> left:
0; bottom:
0;<
br />
}<
br /> .container2 .circle1
{<
br /> -webkit-animation-delay: -1.1s;<
br /> animation-delay: -1.1s;<
br />
}<
br /> .container3 .circle1
{<
br /> -webkit-animation-delay: -1.0s;<
br /> animation-delay: -1.0s;<
br />
}<
br /> .container1 .circle2
{<
br /> -webkit-animation-delay: -0.9s;<
br /> animation-delay: -0.9s;<
br />
}<
br /> .container2 .circle2
{<
br /> -webkit-animation-delay: -0.8s;<
br /> animation-delay: -0.8s;<
br />
}<
br /> .container3 .circle2
{<
br /> -webkit-animation-delay: -0.7s;<
br /> animation-delay: -0.7s;<
br />
}<
br /> .container1 .circle3
{<
br /> -webkit-animation-delay: -0.6s;<
br /> animation-delay: -0.6s;<
br />
}<
br /> .container2 .circle3
{<
br /> -webkit-animation-delay: -0.5s;<
br /> animation-delay: -0.5s;<
br />
}<
br /> .container3 .circle3
{<
br /> -webkit-animation-delay: -0.4s;<
br /> animation-delay: -0.4s;<
br />
}<
br /> .container1 .circle4
{<
br /> -webkit-animation-delay: -0.3s;<
br /> animation-delay: -0.3s;<
br />
}<
br /> .container2 .circle4
{<
br /> -webkit-animation-delay: -0.2s;<
br /> animation-delay: -0.2s;<
br />
}<
br /> .container3 .circle4
{<
br /> -webkit-animation-delay: -0.1s;<
br /> animation-delay: -0.1s;<
br />
}<
br /> @-webkit-keyframes bouncedelay
{<
br />
0%,
80%,
100%
{ -webkit-transform: scale
(0.0) }<
br />
40%
{ -webkit-transform: scale
(1.0) }<
br />
}<
br /> @keyframes bouncedelay
{<
br />
0%,
80%,
100%
{<
br /> transform: scale
(0.0);<
br /> -webkit-transform: scale
(0.0);<
br />
}<
br />
40%
{<
br /> transform: scale
(1.0);<
br /> -webkit-transform: scale
(1.0);<
br />
}<
br />
}<
br /><
/style>
<
div class="spinner">
<
div class="spinner-container container1">
<
div class="circle1"><
/div>
<
div class="circle2"><
/div>
<
div class="circle3"><
/div>
<
div class="circle4"><
/div>
<
/div>
<
div class="spinner-container container2">
<
div class="circle1"><
/div>
<
div class="circle2"><
/div>
<
div class="circle3"><
/div>
<
div class="circle4"><
/div>
<
/div>
<
div class="spinner-container container3">
<
div class="circle1"><
/div>
<
div class="circle2"><
/div>
<
div class="circle3"><
/div>
<
div class="circle4"><
/div>
<
/div>
<
/div>