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

表示サンプルはこちら。IEは10以上で正常表示可能。
http://jsdo.it/goto_jp/xVRa

HTMLは下記のみです。

<span class='icon'></span>

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

$icon-size:30px;
$dot-size:$icon-size/2.1;
.icon {
    display:inline-block;
    position:relative;
    width:$icon-size;
    height:$icon-size;
    vertical-align:middle;
    animation: 1s rotate infinite;
    -webkit-animation: 1s rotate infinite;

    &:before,&:after {
        display:inline-block;
        content:"";
        position:absolute;
        top:50%;
        width:$dot-size;
        height:$dot-size;
        margin-top:-$dot-size/2;
        border-radius:$dot-size;
    }
    &:before {
        left:0;
        background-color:#0c9;
    }
    &:after {
        right:0;
        background-color:#09c;
    }
}
@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で2つのドットを作り、アイコン自体を回転させています。
Sassの方も「$icon-size」の設定一つでアイコンの大きさを変えられるようフレキシブルにしています。