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

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

HTMLはこちら。

<span class='icon7'></span>

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

$icon-width:   15px;
$icon-height:   15px;
$color-1: #096;
$color-2: #069;
$animationtime: 2s;

.icon7 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    box-sizing:border-box;
    -ms-box-sizing:border-box;
    border:solid $icon-width/3 $color-1;
    border-bottom-color:$color-2;
    border-right:transparent;
    border-left:transparent;
    animation: $animationtime rotate-quarter infinite;
    -webkit-animation: $animationtime rotate-quarter infinite;
}

@keyframes rotate-quarter {
    0% {transform: rotate(0deg);}
    12.5% {transform: rotate(90deg);}
    25% {transform: rotate(90deg);}
    37.5% {transform: rotate(180deg);}
    50% {transform: rotate(180deg);}
    62.5% {transform: rotate(270deg);}
    75% {transform: rotate(270deg);}
    87.5% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate-quarter {
    0% {-webkit-transform: rotate(0deg);}
    12.5% {-webkit-transform: rotate(90deg);}
    25% {-webkit-transform: rotate(90deg);}
    37.5% {-webkit-transform: rotate(180deg);}
    50% {-webkit-transform: rotate(180deg);}
    62.5% {-webkit-transform: rotate(270deg);}
    75% {-webkit-transform: rotate(270deg);}
    87.5% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
}

左右のborderを透明化しゲタ状にしたdivの箱を90度ずつ回転させています。
keyframesの値のように12.5%区切りで90%移動させ、次の12.5%区切りまで固定するという方法でテンポよい回転を表現しています。