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

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

HTMLはこちら。

<span class='icon13'></span>

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

$icon-width: 30px;
$icon-height: 10px;
$animationtime: 2s;
$color-1: #096;

.icon13 {
    display:inline-block;
    position:relative;
    vertical-align:middle;
    width: $icon-width;
    height: $icon-height;
    border:solid 1px $color-1;
    -webkit-border-radius:$icon-width;
    -moz-border-radius:$icon-width;
    -ms-border-radius:$icon-width;
    border-radius:$icon-width;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    overflow: hidden;

    &:before {
        display:inline-block;
        content:"";
        position:absolute;
        top:0;
        left:0px;
        background:$color-1;
        width: $icon-width;
        height:$icon-height - 2;
        box-shadow:0 0 $icon-height/2 $icon-height/2 $color-1;
        animation: $animationtime wipe infinite;
        -webkit-animation: $animationtime wipe infinite;
    }
}
@keyframes wipe {
    0% {left:-$icon-width*1.2;}
    50% {left:$icon-width*1.2;}
    100% {left:-$icon-width*1.2;}
}
@-webkit-keyframes wipe {
    0% {left:-$icon-width*1.2;}
    50% {left:$icon-width*1.2;}
    100% {left:-$icon-width*1.2;}
}

本体で枠を作り、beforeの擬似要素をその中で動かしています。

親の本体でoverflow:hidden をしておけば、擬似要素は親の範囲だけで表示することができます。

AWSを利用した導入事例のご紹介

実際に構築を行ったAWSの事例を紹介しています。導入の目的に近い事例をご覧いただくと、実際の構成例やメリット、注意点などが把握できます。

ブックオフコーポレーション株式会社様
第一生命保険株式会社様
株式会社電通様
株式会社LIFULL様
株式会社リブセンス様
TBSアナウンス部様
明治大学様
拓殖大学様