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

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

HTMLはこちら。

<span class='icon8'></span>

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

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

.icon8 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    border-radius:$icon-width;
    border-bottom:solid 2px $color-1;
    animation: 1s rotate linear infinite;
    -webkit-animation: 1s rotate linear infinite;

    &:before {
        display:inline-block;
        content:"";
        position:absolute;
        top:50%;
        left:50%;
        width:$icon-width/2;
        height:$icon-height/2;
        margin-top:-$icon-height/2/2;
        margin-left:-$icon-height/2/2;
        border-radius:$icon-width/2;
        border-right:solid 1px $color-2;
        animation: 1s rotate linear infinite;
        -webkit-animation: 1s rotate linear infinite;
    }
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

今回はごく単純に、本体とbeforeのオブジェクトそれぞれにborderを1箇所つけて回転させているだけです。
同じアニメーションで同じ秒数でも、経が異なれば回転速度も変わってきます。