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

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

HTMLはこちら。

<span class='icon11'></span>

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

$icon-width: 20px;
$icon-height: 20px;
$color-1: #069;
$color-2: #096;

.icon11 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width/2;
    height:$icon-height/2;
    margin:$icon-width/2;
    background-color:$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;
    animation: 1s rotate infinite;
    -webkit-animation: 1s rotate infinite;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        left:50%;
        width: $icon-width/4;
        height: $icon-height/4;
        margin-left:-$icon-width/4/2;
        background-color: $color-2;
        -webkit-border-radius:$icon-width/4;
        -moz-border-radius:$icon-width/4;
        -o-border-radius:$icon-width/4;
        -ms-border-radius:$icon-width/4;
        border-radius:$icon-width/4;

    }
    &:before {
        top:-$icon-width/3;
    }
    &:after {
        bottom:-$icon-width/3;
    }
}

@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の擬似要素を衛星状に配置して、本体を回転させているだけです。

本体の幅より外側に擬似要素を出す時はtopやbottomなどにマイナス値を入れてあげるのですが、注意点として本体の幅は小さいままなので、擬似要素が動き回る範囲をmarginに収める必要があります。