勉強しはじめの頃、まだ知識がないので、正しい言葉がわからなく困ることがよくあります。
よくウェブで待たされているときに「ロード中」であることを表示するために、何か丸いものがクルクル回ってる
↓↓↓ こういうの ↓↓↓
どうやって実装するんだろう？と思っても、ロードが終了するとコードが確認できなくなるし、グーグル先生に聞こうにもなんて検索すればいいのかもわからない。。
きっとこの記事を読んでいるということは、あなたも同じように困ったのでしょう。。笑
いくつか呼び方はあるようですが、一般的な呼び名は 「スピナー(spinner)」 のようです。
動きがあるので、てっきり Javascript で実装しているのかと思ったのですが、CSS で簡単に作れるようです。
実際に書いてみたので、ぜひ参考にしてください！
自力で CSS を書く
スピナーという名前がわかりましたが、ではどう書けばよいのか？
画像にあるオレンジ部分が、灰色の円の中をクルクルと回るサンプルで見ていきましょ。
こちらが実際の CSS コードです。
/* Spinner */
.spinner:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
border: 5px solid lightgrey;
border-top-color: coral;
animation: spinner 0.5s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}これを HTML 側で class="spinner" とすれば、スピナーが表示されます。
思ったより、あっさりしていませんか？
画像見ながらコードを見れば何となく分かると思いますが、
- width, height で大きさを決めて、
- top, left で真ん中にくるようにし、
- このままではスピナーの左上が中心になるので、スピナーのサイズ分 (height/2, width/2) 移動させます。
- border-radius でマルをつくり、
- border で太さ、線種、色を指定し、
- border-top-color でクルクル回る線の色を決め
- 他にも、border-bottom-color, border-left-color, border-right-color があります
- animation で <名前>、時間などを定義し、
- @keyframes <名前> で実際にスピナーを回しています
自由に書き換えて問題ありませんので、自分なりのスピナーを作って下さい。
余談: Font Awesome を使う
自力で書きましたが、世の中には素敵なものがあるんですね。。
Font Awesome というアイコンを提供しているツールキットがあるのですが、既にそこですぐに使えるスピナーを準備していました！！
↓↓↓ こんな感じ ↓↓↓
「自力で実装なんて面倒くさい。」という方は、こちらを使うのもありですね。
私は、そうします。。笑
他にもイロイロあるので、気に入ったスピナーが使えますね。
<div class="fa-3x">
<i class="fas fa-spinner fa-spin">
<i class="fas fa-circle-notch fa-spin">
<i class="fas fa-sync fa-spin">
<i class="fas fa-cog fa-spin">
<i class="fas fa-spinner fa-pulse">
</div>実際に使用する際は、<head> 内に
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">を入れるのを忘れずに。
ヘッダーに Font Awesome 使うよ！宣言をした後は、クラスの指定だけで良いので、メチャメチャ楽ですね。
で、「いつ」使うの？
メチャメチャ簡単に言うと、
- データをロード中 (データを request 後、ロード完了のイベントを出すまで) に表示し
- ロード完了時に Javascript/jQuery などで置き換える
となります。
最近では、非同期通信で追加読込みしたりしますので、表示しないと UX が悪くなりますね。
一時的なものですが、ぜひ表示させてユーザーに「ちゃんと読み込んでるよ！」と教えてあげましょ。
まとめ
いかがでしたでしょうか？
なんて呼んでいいかも分からなかったものが、簡単に実装できるようになりましたね！
他にもイロイロと面白いスピナー表現ができますが、個人的には「ロード中」であることが分かればよいと思うので、よほどのことがない限り Font Awesome で十分に思います。。笑