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

goto_jp 425views 更新:2014年3月3日

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

HTMLはこちら。

<span class='icon7'></span>

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

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

.icon7 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width:$icon-width;
    height:$icon-height;
    box-sizing:border-box;
    -ms-box-sizing:border-box;
    border:solid $icon-width/3 $color-1;
    border-bottom-color:$color-2;
    border-right:transparent;
    border-left:transparent;
    animation: $animationtime rotate-quarter infinite;
    -webkit-animation: $animationtime rotate-quarter infinite;
}

@keyframes rotate-quarter {
    0% {transform: rotate(0deg);}
    12.5% {transform: rotate(90deg);}
    25% {transform: rotate(90deg);}
    37.5% {transform: rotate(180deg);}
    50% {transform: rotate(180deg);}
    62.5% {transform: rotate(270deg);}
    75% {transform: rotate(270deg);}
    87.5% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate-quarter {
    0% {-webkit-transform: rotate(0deg);}
    12.5% {-webkit-transform: rotate(90deg);}
    25% {-webkit-transform: rotate(90deg);}
    37.5% {-webkit-transform: rotate(180deg);}
    50% {-webkit-transform: rotate(180deg);}
    62.5% {-webkit-transform: rotate(270deg);}
    75% {-webkit-transform: rotate(270deg);}
    87.5% {-webkit-transform: rotate(360deg);}
    100% {-webkit-transform: rotate(360deg);}
}

左右のborderを透明化しゲタ状にしたdivの箱を90度ずつ回転させています。
keyframesの値のように12.5%区切りで90%移動させ、次の12.5%区切りまで固定するという方法でテンポよい回転を表現しています。

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

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

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