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

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

HTMLはこちら。

 <span class='icon15'></span>

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

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

.icon15 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        background: $color-1;
    }
    &:before {
        animation: $animationtime worm1 infinite;
        -webkit-animation: $animationtime worm1 infinite;
    }
    &:after {
        animation: $animationtime worm2 infinite;
        -webkit-animation: $animationtime worm2 infinite;
    }
}

@keyframes worm1 {
    0% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
    12.5% {
        top: 0;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    25% {
        top: $icon-height/3*2;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    37.5% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: 0;
    }
    50% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    62.5% {
        top: 0;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    75% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: $icon-width/3*2;
    }
    87.5% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: 0;
    }
    100% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
}
@-webkit-keyframes worm1 {
    0% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
    12.5% {
        top: 0;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    25% {
        top: $icon-height/3*2;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    37.5% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: 0;
    }
    50% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    62.5% {
        top: 0;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    75% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: $icon-width/3*2;
    }
    87.5% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: 0;
    }
    100% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
}

@keyframes worm2 {
    0% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    12.5% {
        top: 0;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    25% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: $icon-width/3*2;
    }
    37.5% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: 0;
    }
    50% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
    62.5% {
        top: 0;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    75% {
        top: $icon-height/3*2;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    87.5% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: 0;
    }
    100% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
}
@-webkit-keyframes worm2 {
    0% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    12.5% {
        top: 0;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
    25% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: $icon-width/3*2;
    }
    37.5% {
        top: 0;
        right: 0;
        bottom: $icon-height/3*2;
        left: 0;
    }
    50% {
        top: 0;
        right: $icon-width/3*2;
        bottom: $icon-height/3*2;
        left: 0;
    }
    62.5% {
        top: 0;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    75% {
        top: $icon-height/3*2;
        right: $icon-width/3*2;
        bottom: 0;
        left: 0;
    }
    87.5% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: 0;
    }
    100% {
        top: $icon-height/3*2;
        right: 0;
        bottom: 0;
        left: $icon-width/3*2;
    }
}

本体の範囲でbefore・afterの擬似要素をしゃくとり虫のように動かしています。

変形には width、height や transform:translate を使いたくなりますが、今回はオブジェの形成自体から width、height で行わず top、right、bottom、left を使うことで、オブジェの形成と位置を同時に調整しています。

伸びて縮んで移動するといった動きの場合、いずれにせよ top、right、bottom、left の値を動かす必要があるので、この4点だけで形成した方が楽に表現できました。