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

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

HTMLはこちら。

<span class='icon10'></span>

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

$icon-width: 5px;
$icon-height: 10px;
$animationtime: 1.5s;
$color-1: #666;

.icon10 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    margin: 0 $icon-width*2;
    border-top:solid $icon-height/2 $color-1;
    border-bottom:solid $icon-height/2 $color-1;
    animation: $animationtime border-wave1 $animationtime/5*1 infinite;
    -webkit-animation: $animationtime border-wave1 $animationtime/5*1 infinite;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        width: $icon-width;
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        top:50%;
        margin-top:-$icon-height/2;
    }
    &:before {
        left: -$icon-width - 2;
        animation: $animationtime border-wave2 infinite;
        -webkit-animation: $animationtime border-wave2 infinite;
    }
    &:after {
        right: -$icon-width - 2;
        animation: $animationtime border-wave2 $animationtime/5*2 infinite;
        -webkit-animation: $animationtime border-wave2 $animationtime/5*2 infinite;
    }
}
@keyframes border-wave1 {
    0% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
    25% {
        border-top:solid $icon-height $color-1;
        border-bottom:solid $icon-height $color-1;
    }
    50% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
    100% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
}
@-webkit-keyframes border-wave1 {
    0% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
    25% {
        border-top:solid $icon-height $color-1;
        border-bottom:solid $icon-height $color-1;
    }
    50% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
    100% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
    }
}
@keyframes border-wave2 {
    0% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    25% {
        border-top:solid $icon-height $color-1;
        border-bottom:solid $icon-height $color-1;
        -moz-transform: translate(0, -5px);
        -ms-transform: translate(0, -5px);
        -o-transform: translate(0, -5px);
        transform: translate(0, -5px);
    }
    50% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    100% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@-webkit-keyframes border-wave2 {
    0% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -webkit-transform: translate(0, 0);
    }
    25% {
        border-top:solid $icon-height $color-1;
        border-bottom:solid $icon-height $color-1;
        -webkit-transform: translate(0, -5px);
    }
    50% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        border-top:solid $icon-height/2 $color-1;
        border-bottom:solid $icon-height/2 $color-1;
        -webkit-transform: translate(0, 0);
    }
}

まずは本体とbeforeとafterの要素で上下borderを使ってバーを作っています。

heightで箱を作らず上下borderを使っているのはアニメーション対応のためなのですが、本体を上下移動させるとbeforeとafterも一緒に上下移動します。そこの算出が非常に大変なので、上下borderの太さを変える形で対応しています。

しかしborderを使っても上に突っ張ればその分beforeとafterは下に下がろうとするので、beforeとafterはそれに対抗してmargin-topを調整する形で引っ込めている寸法です。

beforeとafterの擬似要素を使うことで、本体と併せて3つのオブジェを表現することまでは楽なのですが、アニメーションさせるとなると本体の動きにbefore・afterも追従してすまうので一手間必要になってきます。