CSS3とベクター画像であるSVGで作るローディングアニメーションです。拡大縮小しても劣化しないsvgを使い、CSS3を使って回転させることで、サイズや回転速度を変えて使い回しがききます。また、自身で回転しないのでアニメーションgifよりも比較的軽量で済むのも特長です。

サンプルは、各svgごとに縦横30px、同60px、同90pxの３サイズを指定、回転速度はすべて同じにしてあります。

サンプルのhtmlソース一例

<div class="base">
	<div class="anime1"><img src="img3/spinner.svg" width="30"></div>  
</div>

サンプルのCSSソース

.anime1,.anime2,.anime3 {
width: 30px;
height: 30px;
margin: 30px auto;
text-align:center;
	-webkit-animation: spin 1.5s linear infinite;
	-moz-animation: spin 1.5s linear infinite;
	-ms-animation: spin 1.5s linear infinite;
	-o-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
} 
.anime2 {
width: 60px;
height: 60px;
}
.anime3 {
width: 90px;
height: 90px;
}
@-webkit-keyframes spin {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
	0% {-moz-transform: rotate(0deg);}
	100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
	0% {-ms-transform: rotate(0deg);}
	100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
	0% {-o-transform: rotate(0deg);}
	100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

spinner.svg

spinner2.svg

spinner3.svg