Sun Shape Loding Animation CSS3

.bg { width:110px; height:120px; background:#55c1ff; border:3px solid #000; }
#spiner{ position:relative; width:62px; height:77px; top:20px; left:20px; }
.round{ position:absolute; background-color:#FFFFFF; width:10px; height:24px; -moz-border-radius:8px 8px 0 0; -moz-transform:scale(0.4);
-moz-animation-name:fadeG; -moz-animation-duration:1.04s; -moz-animation-iteration-count:infinite; -moz-animation-direction:linear;
-webkit-border-radius:8px 8px 0 0; -webkit-transform:scale(0.4); -webkit-animation-name:fadeG; -webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite; -webkit-animation-direction:linear; -ms-border-radius:8px 8px 0 0; -ms-transform:scale(0.4);
-ms-animation-name:fadeG; -ms-animation-duration:1.04s; -ms-animation-iteration-count:infinite; -ms-animation-direction:linear;
-o-border-radius:8px 8px 0 0; -o-transform:scale(0.4); -o-animation-name:fadeG; -o-animation-duration:1.04s; -o-animation-iteration-count:infinite;
-o-animation-direction:linear; border-radius:8px 8px 0 0; transform:scale(0.4); animation-name:fadeG; animation-duration:1.04s; animation-iteration-count:infinite;
animation-direction:linear; }
#strip_01{ left:0; top:28px; -moz-animation-delay:0.39s; -moz-transform:rotate(-90deg); -webkit-animation-delay:0.39s; -webkit-transform:rotate(-90deg);
-ms-animation-delay:0.39s; -ms-transform:rotate(-90deg); -o-animation-delay:0.39s; -o-transform:rotate(-90deg); animation-delay:0.39s; transform:rotate(-90deg); }
#strip_02{ left:8px; top:10px; -moz-animation-delay:0.52s; -moz-transform:rotate(-45deg); -webkit-animation-delay:0.52s; -webkit-transform:rotate(-45deg);
-ms-animation-delay:0.52s; -ms-transform:rotate(-45deg); -o-animation-delay:0.52s; -o-transform:rotate(-45deg); animation-delay:0.52s; transform:rotate(-45deg); }
#strip_03{ left:26px; top:3px; -moz-animation-delay:0.65s; -moz-transform:rotate(0deg); -webkit-animation-delay:0.65s; -webkit-transform:rotate(0deg);
-ms-animation-delay:0.65s; -ms-transform:rotate(0deg); -o-animation-delay:0.65s; -o-transform:rotate(0deg); animation-delay:0.65s; transform:rotate(0deg); }
#strip_04{ right:8px; top:10px; -moz-animation-delay:0.78s; -moz-transform:rotate(45deg); -webkit-animation-delay:0.78s; -webkit-transform:rotate(45deg);
-ms-animation-delay:0.78s; -ms-transform:rotate(45deg); -o-animation-delay:0.78s; -o-transform:rotate(45deg); animation-delay:0.78s; transform:rotate(45deg); }
#strip_05{ right:0; top:28px; -moz-animation-delay:0.9099999999999999s; -moz-transform:rotate(90deg); -webkit-animation-delay:0.9099999999999999s;
-webkit-transform:rotate(90deg); -ms-animation-delay:0.9099999999999999s; -ms-transform:rotate(90deg); -o-animation-delay:0.9099999999999999s;
-o-transform:rotate(90deg); animation-delay:0.9099999999999999s; transform:rotate(90deg); }
#strip_06{ right:8px; bottom:7px; -moz-animation-delay:1.04s; -moz-transform:rotate(135deg); -webkit-animation-delay:1.04s; -webkit-transform:rotate(135deg);
-ms-animation-delay:1.04s; -ms-transform:rotate(135deg); -o-animation-delay:1.04s; -o-transform:rotate(135deg); animation-delay:1.04s; transform:rotate(135deg); }
#strip_07{ bottom:0; left:26px; -moz-animation-delay:1.1700000000000002s; -moz-transform:rotate(180deg); -webkit-animation-delay:1.1700000000000002s;
-webkit-transform:rotate(180deg); -ms-animation-delay:1.1700000000000002s; -ms-transform:rotate(180deg); -o-animation-delay:1.1700000000000002s;
-o-transform:rotate(180deg); animation-delay:1.1700000000000002s; transform:rotate(180deg); }
#strip_08{ left:8px; bottom:7px; -moz-animation-delay:1.3s; -moz-transform:rotate(-135deg); -webkit-animation-delay:1.3s; -webkit-transform:rotate(-135deg);
-ms-animation-delay:1.3s; -ms-transform:rotate(-135deg); -o-animation-delay:1.3s; -o-transform:rotate(-135deg); animation-delay:1.3s; transform:rotate(-135deg); }
@-moz-keyframes fadeG{ 0%{ background-color:#004EC4} 100%{ background-color:#FFFFFF} }
@-webkit-keyframes fadeG{ 0%{ background-color:#004EC4} 100%{ background-color:#FFFFFF} }
@-ms-keyframes fadeG{ 0%{ background-color:#004EC4} 100%{ background-color:#FFFFFF} }
@-o-keyframes fadeG{ 0%{ background-color:#004EC4} 100%{ background-color:#FFFFFF} }
@keyframes fadeG{ 0%{ background-color:#004EC4} 100%{ background-color:#FFFFFF} }

<div class="bg">
<div id="spiner">
<div class="round" id="strip_01"></div>
<div class="round" id="strip_02"></div>
<div class="round" id="strip_03"></div>
<div class="round" id="strip_04"></div>
<div class="round" id="strip_05"></div>
<div class="round" id="strip_06"></div>
<div class="round" id="strip_07"></div>
<div class="round" id="strip_08"></div>
</div>
</div>

Tagged in:

• loding css3
• loding animation css3
• css3 loding animation
• Diff