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

goto_jp 304views 更新:2014年2月28日

表示サンプルはこちら。
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を取っておかないと隣接したテキストなどにめりこんでしまうので、その点だけ忘れずにという感じです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません