表示サンプルはこちら。
http://jsdo.it/goto_jp/e0Co
HTMLはこちら。
<span class='icon8'></span>
Sassの記述は下記になります。
$icon-width: 20px; $icon-height: 20px; $color-1: #096; $color-2: #069; .icon8 { display:inline-block; position:relative; vertical-align:middle; width:$icon-width; height:$icon-height; border-radius:$icon-width; border-bottom:solid 2px $color-1; animation: 1s rotate linear infinite; -webkit-animation: 1s rotate linear infinite; &:before { display:inline-block; content:""; position:absolute; top:50%; left:50%; width:$icon-width/2; height:$icon-height/2; margin-top:-$icon-height/2/2; margin-left:-$icon-height/2/2; border-radius:$icon-width/2; border-right:solid 1px $color-2; animation: 1s rotate linear infinite; -webkit-animation: 1s rotate linear infinite; } } @keyframes rotate { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } @-webkit-keyframes rotate { 0% {-webkit-transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);} }
今回はごく単純に、本体とbeforeのオブジェクトそれぞれにborderを1箇所つけて回転させているだけです。
同じアニメーションで同じ秒数でも、経が異なれば回転速度も変わってきます。