css3のみ・画像無しでローディング
概要
よく画像でグルグル回って、ローディングを表現するのがあると思うのですが、それをcss3のみで作成してみました。
↑こんな感じのやつのことですね。
css3のアニメーションを使用しているのでChrome3やSafari4などで見てみてください。
iPhoneでも動くと思います。多分…
※確認したら動きました。
詳細は続きから。
デモ
- 10%
- 20%
- 30%
- 40%
- 50%
- 60%
- 70%
- 80%
- 90%
- 100%
よかった。ちゃんと動いていますね。
サンプルはこちらにも用意してあります。
HTMLとCSS、解説は以下を参照してください。
ソース
HTML
1 2 3 4 5 6 7 8 9 10 11 12 | <ul class="kzms2loading"> <li class="kzms2loading1">10%</li> <li class="kzms2loading2">20%</li> <li class="kzms2loading3">30%</li> <li class="kzms2loading4">40%</li> <li class="kzms2loading5">50%</li> <li class="kzms2loading6">60%</li> <li class="kzms2loading7">70%</li> <li class="kzms2loading8">80%</li> <li class="kzms2loading9">90%</li> <li class="kzms2loading10">100%</li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | /* ローディングを入れる箱の設定 --------------------------------*/ .kzms2loading{ /* 100x100の箱を作成 */ margin:0; padding:0; list-style:none; width:100px; height:100px; position:relative; /* scaleの値をいじれば大きさを変更可能 */ -webkit-transform:scale(1); } /* リスト内の共通設定 --------------------------------*/ .kzms2loading li{ /* 絶対配置で中央に配置 */ position:absolute; top:50%; left:50%; height:0; width:0; margin:-10px 0 0 -10px; /* リセット用css */ padding:0; list-style:none; /* テキスト飛ばし */ text-indent:-9999px; /* 初期設定で透過に */ opacity:0.1; /* ボーダーで無理やり●を表現 */ border:10px solid #666; background-color:#666; -webkit-border-radius:10px; /* アニメーション設定 */ -webkit-animation-duration:2.5s; -webkit-transform-origin:50% 50%; -webkit-animation-name:kzms2loading; -webkit-animation-iteration-count:infinite; } /* ●の個別設定（配置と遅延設定） --------------------------------*/ .kzms2loading1{-webkit-transform:rotate(0deg) translate(0,-40px);} .kzms2loading2{-webkit-transform:rotate(36deg) translate(0,-40px);-webkit-animation-delay:0.25s;} .kzms2loading3{-webkit-transform:rotate(72deg) translate(0,-40px);-webkit-animation-delay:0.5s;} .kzms2loading4{-webkit-transform:rotate(108deg) translate(0,-40px);-webkit-animation-delay:0.75s;} .kzms2loading5{-webkit-transform:rotate(144deg) translate(0,-40px);-webkit-animation-delay:1s;} .kzms2loading6{-webkit-transform:rotate(180deg) translate(0,-40px);-webkit-animation-delay:1.25s;} .kzms2loading7{-webkit-transform:rotate(216deg) translate(0,-40px);-webkit-animation-delay:1.5s;} .kzms2loading8{-webkit-transform:rotate(252deg) translate(0,-40px);-webkit-animation-delay:1.75s;} .kzms2loading9{-webkit-transform:rotate(288deg) translate(0,-40px);-webkit-animation-delay:2s;} .kzms2loading10{-webkit-transform:rotate(324deg) translate(0,-40px);-webkit-animation-delay:2.25s;} /* フェードイン・アウトのアニメーション --------------------------------*/ @-webkit-keyframes kzms2loading{ 0%{ opacity:0.1; } 50%{ opacity:1; } 100%{ opacity:0.1; } } |
まとめのようなもの
どんなHTMLにしようか悩みましたが、とりあえずリストにしてみました。
正直深い意味はないです。
HTML5で考えればよかったですねどうせなら…
そしてCSSですが結構細かなことをしているのですが、要約すると以下の様な感じかと思います。
- olとliをcssで位置調整
- liのwidthとheightを0にして、borderとborder-radiusで●を表現
- CSS3アニメーションをliに設定
- 各liを適切な位置に配置して、アニメーションを遅延する設定にする
- アニメーションをフェードイン・アウトさせる
順番が若干入れ替わってたりしていますが、大体こんなことをさせています。
まだまだいろいろなことが出来てしまいそうですねっ
説明がアバウトすぎるかもしれませんが過去に書いた以下の関連する記事などを眺めて感じ取ってみてください！
