CSS3：ロードアイコンパターン3

表示サンプルはこちら。
http://jsdo.it/goto_jp/ifIQ

HTMLは下記のみです。

<span class='icon3'></span>

Sassの記述は下記になります。

$icon-width: 20px;
$icon-height: 20px;
$color-1: #666;
$color-2: #fff;

.icon3 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    background-color:$color-1;
    border-radius:$icon-width;
    -webkit-border-radius:$icon-width;
    -moz-border-radius:$icon-width;
    -ms-border-radius:$icon-width;
    animation: 1s rotate infinite;
    -webkit-animation: 1s rotate infinite;

    &:before {
        display: inline-block;
        content:"";
        position:absolute;
        top:10%;
        left:50%;
        width: $icon-width/4;
        height: $icon-height/4;
        margin-left:-$icon-width/4/2;
        background-color: $color-2;
        border-radius:$icon-width/4;
        -webkit-border-radius:$icon-width/4;
        -moz-border-radius:$icon-width/4;
        -ms-border-radius:$icon-width/4;
    }
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

.icon3本体は円を成し、icon3:beforeで玉を作って配置し、icon3本体を回転させる仕組みです。