表示サンプルはこちら。
http://jsdo.it/goto_jp/cklF
HTMLはこちら。
<span class='icon12'></span>
Sassの記述は下記になります。
$icon-width: 20px; $icon-height: 20px; $animationtime: 2s; $color-1: #333; .icon12 { display:inline-block; position:relative; vertical-align:middle; width: $icon-width; height: $icon-height; border: solid 1px $color-1; -webkit-border-radius:$icon-width; -moz-border-radius:$icon-width; -o-border-radius:$icon-width; -ms-border-radius:$icon-width; border-radius:$icon-width; &:before { display:inline-block; content:""; position:absolute; width: 0; height: 0; top:50%; left:50%; margin-top:-$icon-height/2; margin-left:-$icon-width/2; border:solid $icon-height/2 $color-1; border-color:$color-1 transparent; -webkit-border-radius:$icon-width/2; -moz-border-radius:$icon-width/2; -o-border-radius:$icon-width/2; -ms-border-radius:$icon-width/2; border-radius:$icon-width/2; animation: $animationtime rotate-reverse linear infinite; -webkit-animation: $animationtime rotate-reverse linear infinite; } } @keyframes rotate-reverse { 0% {transform: rotate(0deg);} 12.5% {transform: rotate(180deg);} 25% {transform: rotate(180deg);} 37.5% {transform: rotate(360deg);} 50% {transform: rotate(360deg);} 62.5% {transform: rotate(180deg);} 75% {transform: rotate(180deg);} 87.5% {transform: rotate(0deg);} 100% {transform: rotate(0deg);} } @-webkit-keyframes rotate-reverse { 0% {-webkit-transform: rotate(0deg);} 12.5% {-webkit-transform: rotate(180deg);} 25% {-webkit-transform: rotate(180deg);} 37.5% {-webkit-transform: rotate(360deg);} 50% {-webkit-transform: rotate(360deg);} 62.5% {-webkit-transform: rotate(180deg);} 75% {-webkit-transform: rotate(180deg);} 87.5% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(0deg);} }
本体で周りの円を作り、beforeの擬似要素で生成したオブジェを回転させています。
transform:rotateによる回転は、360から0へ向かわせると逆回転になります。