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

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

HTMLはこちら。

<span class='icon18'></span>

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

$icon-width: 20px;
$icon-height: 20px;
$animationtime: 1s;
$color-1: #0c9;

.icon18 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;

    &:before, &:after {
        display:inline-block;
        content:"";
        position:absolute;
        width: $icon-width;
        height: $icon-height;
        top: 0;
        left: 0;
        border:solid 1px $color-1;
        -webkit-border-radius: $icon-width;
        -moz-border-radius: $icon-width;
        -ms-border-radius: $icon-width;
        -o-border-radius: $icon-width;
        border-radius: $icon-width;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-shadow: 0 0 2px $color-1, inset 0 0 2px $color-1;
        -moz-box-shadow: 0 0 2px $color-1, inset 0 0 2px $color-1;
        box-shadow: 0 0 2px $color-1, inset 0 0 2px $color-1;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
         -ms-transform: scale(0);
         -o-transform: scale(0);
        transform: scale(0);
    }
    &:before {
        animation: $animationtime ripple infinite;
        -webkit-animation: $animationtime ripple infinite;
    }
    &:after {
        animation: $animationtime ripple $animationtime/3 infinite;
        -webkit-animation: $animationtime ripple $animationtime/3 infinite;
    }
}

@keyframes ripple {
    0% {
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }
    50% {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
    }
}
@-webkit-keyframes ripple {
    0% {
        -webkit-transform: scale(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

before・afterの擬似要素2つとも同じスタイルと同じアニメーションを設定し、アニメーション開始時間をずらすのみで波紋状に交互に動かしています。