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

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

HTMLはこちら。

<span class='icon19'></span>

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

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

.icon19 {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: round($icon-width / 3);
    height: round($icon-height / 3);
    margin: round($icon-width / 3) * 2;
    -webkit-border-radius: $icon-width;
    -moz-border-radius: $icon-width;
    -ms-border-radius: $icon-width;
    -o-border-radius: $icon-width;
    border-radius: $icon-width;
    background: $color-1;
    animation: $animationtime bgColor-blink $animationtime/4 infinite;
    -webkit-animation: $animationtime bgColor-blink $animationtime/4 infinite;

    &:before, &:after {
        display: inline-block;
        content: "";
        position: absolute;
        width: round($icon-width / 3);
        height: round($icon-height / 3);
        -webkit-border-radius: $icon-width;
        -moz-border-radius: $icon-width;
        -ms-border-radius: $icon-width;
        -o-border-radius: $icon-width;
        border-radius: $icon-width;
        background: $color-1;
    }
    &:before {
        left: - round($icon-width / 3) - round($icon-width / 10);
        animation: $animationtime bgColor-blink infinite;
        -webkit-animation: $animationtime bgColor-blink infinite;
    }
    &:after {
        right: - round($icon-width / 3) - round($icon-width / 10);
        animation: $animationtime bgColor-blink $animationtime/2 infinite;
        -webkit-animation: $animationtime bgColor-blink $animationtime/2 infinite;
    }
}

@keyframes bgColor-blink {
    0% {
        background: rgba($color-1,1);
    }
    50% {
        background: rgba($color-1,0);
    }
    100% {
        background: rgba($color-1,1);
    }
}
@-webkit-keyframes bgColor-blink {
    0% {
        background: rgba($color-1,1);
    }
    50% {
        background: rgba($color-1,0);
    }
    100% {
        background: rgba($color-1,1);
    }
}

タグ本体、before、afterの擬似要素で3つ並んだドットを形成して、時間差で透明になるアニメーションを設定しています。

タグ本体もドットのサイズに小さくなっており、そのままだと隣接した要素にめり込んでしまうので適度にmarginを取るのがポイントです。