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

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

HTMLはこちら。

<span class='icon4'></span>

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

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

.icon4 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    background-color:$color-1;
    border-radius:$icon-width;
    -ms-border-radius:$icon-width;

    &:before,&:after {
        display: inline-block;
        content:"";
        position:absolute;
        top:50%;
        left:50%;
    }
    &:before {
        margin-top:-$icon-width/2;
        margin-left:-$icon-width/10/2;
        width: $icon-width/10;
        border-top:solid $icon-width/2 rgba($color-2,.5);
        border-bottom:solid $icon-width/2 transparent;
        animation: 180s rotate infinite linear;
        -webkit-animation: 180s rotate infinite linear;
    }
    &:after {
        margin-top:-$icon-width/2;
        margin-left:-$icon-width/10/2;
        width: $icon-width/10;
        border-top:solid $icon-width/2 $color-2;
        border-bottom:solid $icon-width/2 transparent;
        animation: 3s rotate infinite linear;
        -webkit-animation: 3s rotate infinite linear;
    }
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

:beforeと:afterを時計の針にして回転させています。

borderを上下に突っ張りだして、border-bottomを「transparent」で透明化して針にしています。
「none」で消してしまうとオブジェの中心点がずれてしまうので、「transparent」で透明色にして実体は存在させることでborder上下の中心を回転の中心点のまま保持できます。