CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof

Pretty cool. It uses Javascript to make the spinner rotate with interval break. But I think it can be easier controlled by CSS Animation. So I modified its animation CSS like this:

@-webkit-keyframes rotateThis {

0%, 12.49% {-webkit-transform:scale(0.5) rotate(0deg);}

12.5%, 24.99% {-webkit-transform:scale(0.5) rotate(45deg);}

25%, 37.49% {-webkit-transform:scale(0.5) rotate(90deg);}

37.5%, 49.99% {-webkit-transform:scale(0.5) rotate(135deg);}

50%, 62.49% {-webkit-transform:scale(0.5) rotate(180deg);}

62.5%, 74.99% {-webkit-transform:scale(0.5) rotate(225deg);}

75%, 87.49% {-webkit-transform:scale(0.5) rotate(270deg);}

87.5%, 99.99% {-webkit-transform:scale(0.5) rotate(315deg);}

100% {-webkit-transform:scale(0.5) rotate(360deg);}

}

Source: kilianvalkhof.com