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

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

HTMLはこちら。

<span class='icon14'></span>

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

$icon-width: 30px;
$icon-height: 30px;
$animationtime: 2s;
$color-1: #09c;
$color-2: #990;

.icon14 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    overflow: hidden;
    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        -webkit-border-radius:$icon-width;
        -moz-border-radius:$icon-width;
        -ms-border-radius:$icon-width;
        border-radius:$icon-width;
    }
    &:before {
        background: $color-1;
        width: $icon-width/5*3;
        height: $icon-height/5*3;
        top:50%;
        left:50%;
        margin-top:-$icon-height/5*3/2;
        margin-left:-$icon-width/5*3/2;
        z-index: 1;
    }
    &:after {
        background: $color-2;
        width: $icon-width/6;
        height: $icon-height/6;
        top:50%;
        left:0;
        margin-top:-$icon-height/12;
        //z-index: 2;
        animation: $animationtime satellite infinite;
        -webkit-animation: $animationtime satellite infinite;
    }
}

@keyframes satellite {
    0% {
        left:0;
        z-index: 2;
        margin-top:-$icon-height/12;
    }
    49% {
        z-index: 2;
    }
    24% {
        margin-top:-$icon-height/12 + $icon-height/9;
    }
    50% {
        left:$icon-width - $icon-width/6;
        z-index: 0;
        margin-top:-$icon-height/12;
    }
    99% {
        z-index: 0;
    }
    74% {
        margin-top:-$icon-height/12 - $icon-height/9;
    }
    100% {
        left:0;
        z-index: 2;
    }
}
@-webkit-keyframes satellite {
    0% {
        left:0;
        z-index: 2;
        margin-top:-$icon-height/12;
    }
    49% {
        z-index: 2;
    }
    24% {
        margin-top:-$icon-height/12 + $icon-height/9;
    }
    50% {
        left:$icon-width - $icon-width/6;
        z-index: 0;
        margin-top:-$icon-height/12;
    }
    99% {
        z-index: 0;
    }
    74% {
        margin-top:-$icon-height/12 - $icon-height/9;
    }
    100% {
        left:0;
        z-index: 2;
    }
}

z-indexが必要な都合、タグ本体はスペース確保のみに使い、before擬似要素で母星、after擬似要素で衛星を作って回してます。

keyframesが長いですが、周回っぽく見せるため途中で衛星のmargin-topの値を操作して緩やかなカーブをつけています。

また左端右端でz-indexの値を変えることで母星の裏に回るようにしています。
49%や99%のギリギリでz-indexを変えるようにしないと変な位置で裏表が変わるのでこのようにしています。