CSSだけでloadingを作る方法 その他のバータイプ

Loadingアイコンメーカーはじめました(2015年9月3日)

CSSだけでloadingを作る方法の5回目です。
過去に矢印ボールが回転するloadingloadingバーその他の回転系と紹介してきました。
今回は、比較的よく見かけるバータイプのloadingをご紹介いたします。

イコライザータイプ

いくつかに分割されたバーのスライドするタイプです。ここではイコライザーに似ているのでイコライザータイプと名付けました。
HTMLはいずれもspanのみです。 
<span class="loading"></span>
左のもののCSSは以下です。

span.loading {
    display: inline-block;
    width: 178px;
    height: 20px; /*入れ物の高さ*/
    border: 1px solid transparent;
    outline: 1px solid #999; /*#999=枠の色*/

    background-position: 0 0, left;
    background-repeat: no-repeat, repeat-x;
    background-size: 20px 100%, 10px 100%;

    background-image:
        -webkit-gradient(linear, left top, right top, from(#aaa), color-stop(0.4, #aaa), color-stop(0.4, transparent), color-stop(0.5, transparent), color-stop(0.5, #999), color-stop(0.9, #999), color-stop(0.9, transparent), to(transparent) ),
        -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.8, #ccc), color-stop(0.8, transparent), to(transparent) ); /*#aaa=移動するバーの左側の色、#999=移動するバーの右側の色、#ccc=移動しない背景バーの色*/
    background-image:
        -webkit-linear-gradient(left,#aaa 8px,transparent 8px, transparent 10px, #999 10px, #999 18px, transparent 18px),
        -webkit-linear-gradient(left,#ccc 8px,transparent 0); /*同上*/
    background-image:
        linear-gradient(to right,#aaa 8px,transparent 8px, transparent 10px, #999 10px, #999 18px, transparent 18px),
        linear-gradient(to right,#ccc 8px,transparent 0); /*同上*/

    -webkit-animation: mamewaza_loading 1.5s linear infinite; /*1.5s=移動する速さ*/
    animation: mamewaza_loading 1.5s linear infinite; /*同上*/
}

@-webkit-keyframes mamewaza_loading {
    0% {
        background-position: 0 0, left;
    }
    4% {
        background-position: 0 0, left;
    }
    5% {
        background-position: 10px 0, left;
    }
    9% {
        background-position: 10px 0, left;
    }
    10% {
        background-position: 20px 0, left;
    }
    14% {
        background-position: 20px 0, left;
    }
    15% {
        background-position: 30px 0, left;
    }
    19% {
        background-position: 30px 0, left;
    }
    20% {
        background-position: 40px 0, left;
    }
    24% {
        background-position: 40px 0, left;
    }
    25% {
        background-position: 50px 0, left;
    }
    29% {
        background-position: 50px 0, left;
    }
    30% {
        background-position: 60px 0, left;
    }
    34% {
        background-position: 60px 0, left;
    }
    35% {
        background-position: 70px 0, left;
    }
    39% {
        background-position: 70px 0, left;
    }
    40% {
        background-position: 80px 0, left;
    }
    44% {
        background-position: 80px 0, left;
    }
    45% {
        background-position: 90px 0, left;
    }
    49% {
        background-position: 90px 0, left;
    }
    50% {
        background-position: 100px 0, left;
    }
    54% {
        background-position: 100px 0, left;
    }
    55% {
        background-position: 110px 0, left;
    }
    59% {
        background-position: 110px 0, left;
    }
    60% {
        background-position: 120px 0, left;
    }
    64% {
        background-position: 120px 0, left;
    }
    65% {
        background-position: 130px 0, left;
    }
    69% {
        background-position: 130px 0, left;
    }
    70% {
        background-position: 140px 0, left;
    }
    74% {
        background-position: 140px 0, left;
    }
    75% {
        background-position: 150px 0, left;
    }
    79% {
        background-position: 150px 0, left;
    }
    80% {
        background-position: 160px 0, left;
    }
    84% {
        background-position: 160px 0, left;
    }
    85% {
        background-position: 170px 0, left;
    }
    89% {
        background-position: 170px 0, left;
    }
    90% {
        background-position: 180px 0, left;
    }
    94% {
        background-position: 180px 0, left;
    }
    95% {
        background-position: 190px 0, left;
    }
    99% {
        background-position: 190px 0, left;
    }
    100% {
        background-position: 200px 0, left;
    }
}
@keyframes mamewaza_loading {
    0% {
        background-position: 0 0, left;
    }
    4% {
        background-position: 0 0, left;
    }
    5% {
        background-position: 10px 0, left;
    }
    9% {
        background-position: 10px 0, left;
    }
    10% {
        background-position: 20px 0, left;
    }
    14% {
        background-position: 20px 0, left;
    }
    15% {
        background-position: 30px 0, left;
    }
    19% {
        background-position: 30px 0, left;
    }
    20% {
        background-position: 40px 0, left;
    }
    24% {
        background-position: 40px 0, left;
    }
    25% {
        background-position: 50px 0, left;
    }
    29% {
        background-position: 50px 0, left;
    }
    30% {
        background-position: 60px 0, left;
    }
    34% {
        background-position: 60px 0, left;
    }
    35% {
        background-position: 70px 0, left;
    }
    39% {
        background-position: 70px 0, left;
    }
    40% {
        background-position: 80px 0, left;
    }
    44% {
        background-position: 80px 0, left;
    }
    45% {
        background-position: 90px 0, left;
    }
    49% {
        background-position: 90px 0, left;
    }
    50% {
        background-position: 100px 0, left;
    }
    54% {
        background-position: 100px 0, left;
    }
    55% {
        background-position: 110px 0, left;
    }
    59% {
        background-position: 110px 0, left;
    }
    60% {
        background-position: 120px 0, left;
    }
    64% {
        background-position: 120px 0, left;
    }
    65% {
        background-position: 130px 0, left;
    }
    69% {
        background-position: 130px 0, left;
    }
    70% {
        background-position: 140px 0, left;
    }
    74% {
        background-position: 140px 0, left;
    }
    75% {
        background-position: 150px 0, left;
    }
    79% {
        background-position: 150px 0, left;
    }
    80% {
        background-position: 160px 0, left;
    }
    84% {
        background-position: 160px 0, left;
    }
    85% {
        background-position: 170px 0, left;
    }
    89% {
        background-position: 170px 0, left;
    }
    90% {
        background-position: 180px 0, left;
    }
    94% {
        background-position: 180px 0, left;
    }
    95% {
        background-position: 190px 0, left;
    }
    99% {
        background-position: 190px 0, left;
    }
    100% {
        background-position: 200px 0, left;
    }
}
 

長いですがほとんどがkeyframesの記述です。
background系はカンマ区切りで複数指定が可能であること、またgradientを使用して長方形・三角形・円などの図形を展開できること、の2点を利用しています。これまでのloadingもこの手法が主です。
gradientで背景の目盛と上で移動する目盛を描写しています。
注意が必要なのは、background-image:A, B;とした場合は、BよりAが上にくることです。HTMLのタグで後のものが上に被さるルールとは逆になる点に注意しましょう。
background-sizeとtransparentの使い方が肝となりますが、CSSを手書きで作成される方の場合は、学ぶよりも試行錯誤して慣れた方が早いと思われます。

右のタイプは、background系のカンマ区切りを使用せず単一になる代わりに、gradientを細かく区切って目盛のグラデーションを表現しています。
CSSは以下です。animationは左のものと同じですので省略します。

span.loading {
    display: inline-block;
    width: 178px;
    height: 20px; /*入れ物の高さ*/
    border: 1px solid transparent;
    outline: 1px solid #999; /*#999=枠の色*/

    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 50px 100%;

    background-image: -webkit-gradient(linear, left top, right top, from(#ddd), color-stop(0.16, #ddd), color-stop(0.16, transparent), color-stop(0.20, transparent), color-stop(0.20, #ccc), color-stop(0.36, #ccc), color-stop(0.36, transparent), color-stop(0.40, transparent), color-stop(0.40, #bbb), color-stop(0.56, #bbb), color-stop(0.56, transparent), color-stop(0.60, transparent), color-stop(0.60, #aaa), color-stop(0.76, #aaa), color-stop(0.76, transparent), color-stop(0.80, transparent), color-stop(0.80, #999), color-stop(0.96, #999), color-stop(0.96, transparent), to(transparent) ); /*#ddd,#ccc,#bbb,#aaa,#999=移動するバーの左から右へのグラデーション*/
    background-image: -webkit-linear-gradient(left, #ddd 8px, transparent 8px, transparent 10px, #ccc 10px, #ccc 18px, transparent 18px, transparent 20px, #bbb 20px, #bbb 28px, transparent 28px, transparent 30px, #aaa 30px, #aaa 38px, transparent 38px, transparent 40px, #999 40px, #999 48px, transparent 48px); /*同上*/
    background-image: linear-gradient(to right, #ddd 8px, transparent 8px, transparent 10px, #ccc 10px, #ccc 18px, transparent 18px, transparent 20px, #bbb 20px, #bbb 28px, transparent 28px, transparent 30px, #aaa 30px, #aaa 38px, transparent 38px, transparent 40px, #999 40px, #999 48px, transparent 48px); /*同上*/

    -webkit-animation: mamewaza_loading 1.5s linear infinite; /*1.5s=移動する速さ*/
    animation: mamewaza_loading 1.5s linear infinite; /*同上*/
}
 

見やすくするためにbackground-imageに改行を入れてみると次のようになります。

    background-image: -webkit-gradient(linear, left top, right top,
        from(#ddd),
        color-stop(0.16, #ddd),
        color-stop(0.16, transparent),
        color-stop(0.20, transparent),
        color-stop(0.20, #ccc),
        color-stop(0.36, #ccc),
        color-stop(0.36, transparent),
        color-stop(0.40, transparent),
        color-stop(0.40, #bbb),
        color-stop(0.56, #bbb),
        color-stop(0.56, transparent),
        color-stop(0.60, transparent),
        color-stop(0.60, #aaa),
        color-stop(0.76, #aaa),
        color-stop(0.76, transparent),
        color-stop(0.80, transparent),
        color-stop(0.80, #999),
        color-stop(0.96, #999),
        color-stop(0.96, transparent),
        to(transparent)
    ); /*#ddd,#ccc,#bbb,#aaa,#999=移動するバーの左から右へのグラデーション*/
    background-image: -webkit-linear-gradient(left,
        #ddd 8px,
        transparent 8px,
        transparent 10px,
        #ccc 10px,
        #ccc 18px,
        transparent 18px,
        transparent 20px,
        #bbb 20px,
        #bbb 28px,
        transparent 28px,
        transparent 30px,
        #aaa 30px,
        #aaa 38px,
        transparent 38px,
        transparent 40px,
        #999 40px,
        #999 48px,
        transparent 48px
    ); /*同上*/
    background-image: linear-gradient(to right,
        #ddd 8px,
        transparent 8px,
        transparent 10px,
        #ccc 10px,
        #ccc 18px,
        transparent 18px,
        transparent 20px,
        #bbb 20px,
        #bbb 28px,
        transparent 28px,
        transparent 30px,
        #aaa 30px,
        #aaa 38px,
        transparent 38px,
        transparent 40px,
        #999 40px,
        #999 48px,
        transparent 48px
    ); /*同上*/

 

これがグラデーションを表現している個所です。

信号機タイプ

次に、3つの正方形または円が順に点灯する信号機のようなloadingです。
HTMLはいずれもspanのみです。 
<span class="loading"></span>
正方形タイプのCSSは以下です。 

span.loading {
    display: inline-block;
    width: 100px;
    height: 20px; /*入れ物の高さ*/
    background-position: 0 0, left;
    background-repeat: no-repeat, repeat-x;
    background-size: 20px 100%, 40px 100%;

    background-image:
        -webkit-gradient(linear, left top, right top, from(#999), to(#999) ),
        -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.5, #ccc), color-stop(0.5, transparent), to(transparent) ); /*#999=移動する箱の色、#ccc=移動しない箱の色*/
    background-image:
        -webkit-linear-gradient(left, #999 20px, transparent),
        -webkit-linear-gradient(left, #ccc 20px, transparent 20px); /*同上*/
    background-image:
        linear-gradient(to right, #999 20px, transparent),
        linear-gradient(to right, #ccc 20px, transparent 20px); /*同上*/

    -webkit-animation: mamewaza_loading 0.5s linear infinite; /*0.5s=移動する速さ*/
    animation: mamewaza_loading 0.5s linear infinite; /*同上*/
}

@-webkit-keyframes mamewaza_loading {
    0% {
        background-position: 0 0, left;
    }
    32% {
        background-position: 0 0, left;
    }
    33% {
        background-position: 40px 0, left;
    }
    66% {
        background-position: 40px 0, left;
    }
    67% {
        background-position: 80px 0, left;
    }
    100% {
        background-position: 80px 0, left;
    }
}
@keyframes mamewaza_loading {
    0% {
        background-position: 0 0, left;
    }
    32% {
        background-position: 0 0, left;
    }
    33% {
        background-position: 40px 0, left;
    }
    66% {
        background-position: 40px 0, left;
    }
    67% {
        background-position: 80px 0, left;
    }
    100% {
        background-position: 80px 0, left;
    }
}
 

イコライザータイプと仕組みは全く一緒です。
3段階の移動のみのためanimationが短めです。
次に円タイプのCSSは以下です。animationは上と同一のため省略します。

span.loading {
    display: inline-block;
    width: 100px;
    height: 20px; /*入れ物の高さ*/
    background-position: 0 0, left;
    background-repeat: no-repeat, repeat-x;
    background-size: 20px 100%, 40px 100%;

    background-image:
        -webkit-gradient(radial, 10 center, 0, 10 center, 10, from(#999), color-stop(0.9, #999), color-stop(0.95, transparent), to(transparent) ),
        -webkit-gradient(radial, 10 center, 0, 10 center, 10, from(#ccc), color-stop(0.9, #ccc), color-stop(0.95, transparent), to(transparent) ); /*#999=移動する円の色、#ccc=移動しない円の色*/
    background-image:
        -webkit-radial-gradient(10px 10px, 10px 10px, #999, #999 90%, transparent 95%, transparent),
        -webkit-radial-gradient(10px 10px, 10px 10px, #ccc, #ccc 90%, transparent 95%, transparent); /*同上*/
    background-image:
        radial-gradient(10px 10px at 10px 10px, #999, #999 99%, transparent),
        radial-gradient(10px 10px at 10px 10px, #ccc, #ccc 99%, transparent); /*同上*/

    -webkit-animation: mamewaza_loading 0.5s linear infinite; /*0.5s=移動する速さ*/
    animation: mamewaza_loading 0.5s linear infinite; /*同上*/
}
 

ボールが回転するloadingのところで使用したのと同じく、radial-gradientにより円を表現しています。
それ以外は正方形タイプと変わりません。

色やサイズのカスタマイズ

今回ご紹介したloadingも他にもれず、背景が透過しているので、例えば画像の上でも使用ができます。
その他、主に色と移動速度のカスタマイズが簡単に可能です。CSSのコメントアウト欄に書いてある説明をご参考ください。
しかしながら、サイズについては、高さは自在なものの、横幅は伸縮時には変更しなければいけない箇所が多すぎるので、今回は説明を省きました。もし変更されたい場合は、widthの他、background-size、gradient内のpx、animation内のpxなどを調整してください。

対応ブラウザとIE対策

PCブラウザではIE11・IE10・Chrome・Safari・Firefox、スマホではiOSのSafari・Android標準ブラウザ・Chrome・Firefoxに対応しています。
IE9以下については、例によって以下のコードでloadingであることを表記します。
以上で、ほぼすべての環境でloadingであることを伝えることが可能です。

<!--[if lte IE 9 ]>
<style type="text/css">
    /*loading*/
    span.loading:after {
        display: inline-block;
        content: "loading";
        left: 0;
        right: 0;
        top: 50%;
        text-align: center;
        line-height: 0;
    }
</style>
<![endif]-->
 

これまで5回にわたってloadingを紹介してきましたので、これらを簡単にカスタマイズできる無料のサービスをツールのページで提供を検討しています。
準備が出来ましたら、あらためてご紹介いたします。

2015/7/31