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

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

HTMLはこちら。

<span class='icon6'></span>

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

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

.icon6 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width/2;
    height:$icon-height/2;
    margin:$icon-height/2;
    border-radius:$icon-width;
    -ms-border-radius:$icon-width;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    background:$icon-color;
    animation: $animationtime beat1 infinite;
    -webkit-animation: $animationtime beat1 infinite;

    &:before {
        display:inline-block;
        content:"";
        position:absolute;
        top:0;
        left:0;
        width:$icon-width;
        height:$icon-height;
        border:solid 1px $icon-color;
        margin-top: -$icon-height/4;
        margin-left: -$icon-width/4;
        border-radius:$icon-width;
        -ms-border-radius:$icon-width;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        animation: $animationtime beat2 infinite;
        -webkit-animation: $animationtime beat2 infinite;
    }
}
@keyframes beat1 {
    0% {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
    }
    50% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes beat1 {
    0% {
        -webkit-transform: scale(0.5);
    }
    50% {
        -webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes beat2 {
    0% {
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        opacity: 0.8;
    }
    50% {
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        opacity: 0.8;
    }
    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 beat2 {
    0% {
        -webkit-transform: scale(0.5);
        opacity: 0.8;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

クラス「icon6」本体は中心点になり、:beforeで輪を生成して配置して広がり消えるアニメーションを付けています。

ポイントとして、「icon6」本体の幅は中心点のサイズしかないため、広がる輪の分までmarginを取っておかないと隣接したテキストなどにめりこんでしまうので、その点だけ忘れずにという感じです。