CSSだけで床屋のクルクル看板のようなloadingバーを作る

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

と2回ご紹介した「CSSだけでloading」シリーズ第3段です。
今回は下記のようなバータイプのloadingを作ります。真ん中のタイプを縦にすると、床屋のクルクル看板のようなのでタイトルにしました。
動作確認ブラウザは以下です。

PCChrome43・Safari8・IE10・IE11・Firefox38
iOSSafari8
Android4標準ブラウザ・Chrome・Firefox
Android2.3標準ブラウザ
OS XSafari8
   

HTMLは非常にシンプルで
<span class="loading"></span>
のみです。
まずは左のパターンのCSSを紹介します。

span.loading {
    position: relative;
    display: inline-block;
    width: 200px; /*入れ物の幅*/
    height: 20px; /*入れ物の高さ*/
    border: 1px solid #999; /*#999=入れ物の線*/
    background-color: #eee; /*#eee=中のストライプの一方の色*/
    overflow: hidden;

    border-radius: 5px;

    background-repeat: repeat-x;
    background-size: 40px 100%; /*40px=中のストライプの幅の2倍*/

    background-image: -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.5, #ccc), color-stop(0.51, transparent), to(transparent) ); /*#ccc=中のストライプの一方の色*/
    background-image: -webkit-linear-gradient(left,#ccc 20px,transparent 0); /*20px=中のストライプの幅、#ccc=中のストライプの一方の色*/
    background-image: linear-gradient(to left,#ccc 20px,transparent 0);

    -webkit-animation: sliding 3s linear infinite; /*3s=速さ*/
    animation: sliding 3s linear infinite; /*同上*/
}
    @-webkit-keyframes sliding {
        0% {
            background-position: 0;
        }
        100% {
            background-position: 100%;
        }
    }
    @keyframes sliding {
        0% {
            background-position: 0;
        }
        100% {
            background-position: 100%;
        }
    }

今回は疑似要素を使用していないので比較的シンプルです。
背景画像をgradientで設定し、更に背景画像のサイズをbackground-sizeで制限しながらリピート表示しています。
アニメーションでbackground-positionを変化させることで、背景が移動して、loadingの雰囲気を出しています。

linear-gradientに角度をつけて平行四辺形を表現

上で説明したbackground-imageにgradientを利用する方法ですが、gradientの第1引数で角度を設定し、またgradientをカンマ区切りで複数定義することで、三角形など様々な表現が出来ます。まめわざのデザインパターンの中でもちょっと奇抜なギザギザはこれで表現しています。
ここでも、background-imageの部分を

    background-image: -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.5, #ccc), color-stop(0.51, transparent), to(transparent) ); /*#ccc=中のストライプの一方の色*/
    background-image: -webkit-linear-gradient(left,#ccc 20px,transparent 0); /*20px=中のストライプの幅、#ccc=中のストライプの一方の色*/
    background-image: linear-gradient(to left,#ccc 20px,transparent 0);

のように書き換えることで、真ん中のパターンが表現できます。

反復横跳びタイプ

右の反復横跳びのようなタイプは、前2タイプのbackground系とanimationを入れ替えます。CSSは以下です。

span.loading {
    position: relative;
    display: inline-block;
    width: 200px; /*入れ物の幅*/
    height: 20px; /*入れ物の高さ*/
    border: 1px solid #999; /*#999=入れ物の線*/
    background-color: #eee; /*#eee=入れ物の背景色*/
    overflow: hidden;

    border-radius: 5px;

    background-repeat: no-repeat;
    background-size: 40px 100%; /*40px=中の四角の幅*/

    background-image: -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.99, #ccc), to(transparent) ),
        -webkit-gradient(linear, left top, right top, from(#ccc), color-stop(0.99, #ccc), to(transparent) );  /*#ccc=中の四角の色*/
    background-image: -webkit-linear-gradient(left,#ccc,#ccc), -webkit-linear-gradient(left,#ccc,#ccc); /*同上*/
    background-image: linear-gradient(to left,#ccc,#ccc), linear-gradient(to left,#ccc,#ccc); /*同上*/

    -webkit-animation: sliding 1s ease-in-out infinite alternate; /*1s=速さ*/
    animation: sliding 1s ease-in-out infinite alternate; /*同上*/
}
    @-webkit-keyframes sliding {
        0% {
            background-position: 0, 100%;
        }
        100% {
            background-position: 100%, 0;
        }
    }
    @keyframes sliding {
        0% {
            background-position: 0, 100%;
        }
        100% {
            background-position: 100%, 0;
        }
    }

background-repeatをやめ、background-imageでそれぞれ2つの四角を定義します。
animationの中で、2つ定義した四角を0->100%、100%->0と逆に指定して交差させています。
このようにカンマ区切りでbackground-imageとbackground-positionを定義する方法は覚えておくと便利です。

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

上記したソースのコメントアウト部分(/**/)に、可変なサイズと色についての説明を記述しましたのでご参考ください。
例えば下記のような小さなバーを簡単に作れます。

尚、ストライプ2つ分(=2色分)の幅は入れ物の幅の約数である必要があります。
悪い例)ストライプ2つ分の幅30px、入れ物の幅200px・・・200を30で割り切れない
良い例)ストライプ2つ分の幅50px、入れ物の幅200px・・・200を50で割り切れる

クロスブラウザ対策

以上はIE8・IE9で動作しないため、「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]-->

2015年6月18日)ベンダーprefixの検証結果を反映し、一部内容を修正しました。

2015/6/5