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

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

HTMLはこちら。

<span class='icon13'></span>

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

$icon-width: 30px;
$icon-height: 10px;
$animationtime: 2s;
$color-1: #096;

.icon13 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    border:solid 1px $color-1;
    -webkit-border-radius:$icon-width;
    -moz-border-radius:$icon-width;
    -ms-border-radius:$icon-width;
    border-radius:$icon-width;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    overflow: hidden;

    &:before {
        display:inline-block;
        content:"";
        position:absolute;
        top:0;
        left:0px;
        background:$color-1;
        width: $icon-width;
        height:$icon-height - 2;
        box-shadow:0 0 $icon-height/2 $icon-height/2 $color-1;
        animation: $animationtime wipe infinite;
        -webkit-animation: $animationtime wipe infinite;
    }
}
@keyframes wipe {
    0% {left:-$icon-width*1.2;}
    50% {left:$icon-width*1.2;}
    100% {left:-$icon-width*1.2;}
}
@-webkit-keyframes wipe {
    0% {left:-$icon-width*1.2;}
    50% {left:$icon-width*1.2;}
    100% {left:-$icon-width*1.2;}
}

本体で枠を作り、beforeの擬似要素をその中で動かしています。

親の本体でoverflow:hidden をしておけば、擬似要素は親の範囲だけで表示することができます。