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

表示サンプルはこちら。
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へ向かわせると逆回転になります。