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

goto_jp 328views 更新:2014年2月19日

表示サンプルはこちら。IEは10以上で正常表示可能。
http://jsdo.it/goto_jp/xVRa

HTMLは下記のみです。

<span class='icon'></span>

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

$icon-size:30px;
$dot-size:$icon-size/2.1;
.icon {
    display:inline-block;
    position:relative;
    width:$icon-size;
    height:$icon-size;
    vertical-align:middle;
    animation: 1s rotate infinite;
    -webkit-animation: 1s rotate infinite;

    &:before,&:after {
        display:inline-block;
        content:"";
        position:absolute;
        top:50%;
        width:$dot-size;
        height:$dot-size;
        margin-top:-$dot-size/2;
        border-radius:$dot-size;
    }
    &:before {
        left:0;
        background-color:#0c9;
    }
    &:after {
        right:0;
        background-color:#09c;
    }
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

beforeとafterで2つのドットを作り、アイコン自体を回転させています。
Sassの方も「$icon-size」の設定一つでアイコンの大きさを変えられるようフレキシブルにしています。

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

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

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