-
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);}
}
