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

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

HTMLは下記のみです。

<span class='icon2'></span>

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

$icon-width:30px;
$icon-height:10px;
$icon-color:#333;
.icon2 {
    display:inline-block;
    position:relative;
    width:$icon-width;
    height:$icon-height;
    vertical-align:middle;
    border-radius:$icon-height/5;
    -webkit-animation: 0.5s animation-icon2 infinite;
}

@-webkit-keyframes animation-icon2 {
    0% {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba($icon-color,.25)), color-stop(0.25, rgba($icon-color,.25)), color-stop(0.25, rgba($icon-color,.5)), color-stop(0.5, rgba($icon-color,.5)), color-stop(0.5, rgba($icon-color,.75)), color-stop(0.75, rgba($icon-color,.75)), color-stop(0.75, $icon-color), to($icon-color));
        background: -webkit-linear-gradient(left, rgba($icon-color,.25) 0%, rgba($icon-color,.25) 25%, rgba($icon-color,.5) 25%, rgba($icon-color,.5) 50%, rgba($icon-color,.75) 50%, rgba($icon-color,.75) 75%, $icon-color 75%, $icon-color 100%);
    }
    25% {
        background: -webkit-gradient(linear, 0 0, 100% 0, from($icon-color), color-stop(0.25, $icon-color), color-stop(0.25, rgba($icon-color,.25)), color-stop(0.5, rgba($icon-color,.25)), color-stop(0.5, rgba($icon-color,.5)), color-stop(0.75, rgba($icon-color,.5)), color-stop(0.75, rgba($icon-color,.75)), to(rgba($icon-color,.75)));
        background: -webkit-linear-gradient(left, $icon-color 0%, $icon-color 25%, rgba($icon-color,.25) 25%, rgba($icon-color,.25) 50%, rgba($icon-color,.5) 50%, rgba($icon-color,.5) 75%, rgba($icon-color,.75) 75%, rgba($icon-color,.75) 100%);
    }
    50% {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba($icon-color,.75)), color-stop(0.25, rgba($icon-color,.75)), color-stop(0.25, $icon-color), color-stop(0.5, $icon-color), color-stop(0.5, rgba($icon-color,.25)), color-stop(0.75, rgba($icon-color,.25)), color-stop(0.75, rgba($icon-color,.5)), to(rgba($icon-color,.5)));
        background: -webkit-linear-gradient(left, rgba($icon-color,.75) 0%, rgba($icon-color,.75) 25%, $icon-color 25%, $icon-color 50%, rgba($icon-color,.25) 50%, rgba($icon-color,.25) 75%, rgba($icon-color,.5) 75%, rgba($icon-color,.5) 100%);
    }
    75% {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba($icon-color,.5)), color-stop(0.25, rgba($icon-color,.5)), color-stop(0.25, rgba($icon-color,.75)), color-stop(0.5, rgba($icon-color,.75)), color-stop(0.5, $icon-color), color-stop(0.75, $icon-color), color-stop(0.75, rgba($icon-color,.25)), to(rgba($icon-color,.25)));
        background: -webkit-linear-gradient(left, rgba($icon-color,.5) 0%, rgba($icon-color,.5) 25%, rgba($icon-color,.75) 25%, rgba($icon-color,.75) 50%, $icon-color 50%, $icon-color 75%, rgba($icon-color,.25) 75%, rgba($icon-color,.25) 100%);
    }
    100% {
        background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba($icon-color,.25)), color-stop(0.25, rgba($icon-color,.25)), color-stop(0.25, rgba($icon-color,.5)), color-stop(0.5, rgba($icon-color,.5)), color-stop(0.5, rgba($icon-color,.75)), color-stop(0.75, rgba($icon-color,.75)), color-stop(0.75, $icon-color), to($icon-color));
        background: -webkit-linear-gradient(left, rgba($icon-color,.25) 0%, rgba($icon-color,.25) 25%, rgba($icon-color,.5) 25%, rgba($icon-color,.5) 50%, rgba($icon-color,.75) 50%, rgba($icon-color,.75) 75%, $icon-color 75%, $icon-color 100%);
    }
}

※グラデーションの記述が長いのでWebkit(Chrome,Safari)の記述のみ抜粋しています。

CSS3のグラデーションをマス目のように描画して、キーフレームごとに色を置き換える方法です。
幅やベースの色も冒頭の設定で変えられる作りにしています。