Loadingアイコンメーカーはじめました(2015年9月3日)
CSSだけでloadingを作る方法の5回目です。
過去に矢印・ボールが回転するloading・loadingバー・その他の回転系と紹介してきました。
今回は、比較的よく見かけるバータイプの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などを調整してください。
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を紹介してきましたので、これらを簡単にカスタマイズできる無料のサービスをツールのページで提供を検討しています。
準備が出来ましたら、あらためてご紹介いたします。