ロード中にクルクル回るやつを CSS でコーディングしてみる

勉強しはじめの頃、まだ知識がないので、正しい言葉がわからなく困ることがよくあります。

よくウェブで待たされているときに「ロード中」であることを表示するために、何か丸いものがクルクル回ってる
↓↓↓ こういうの ↓↓↓

どうやって実装するんだろう？と思っても、ロードが終了するとコードが確認できなくなるし、グーグル先生に聞こうにもなんて検索すればいいのかもわからない。。

きっとこの記事を読んでいるということは、あなたも同じように困ったのでしょう。。笑

いくつか呼び方はあるようですが、一般的な呼び名は 「スピナー(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 で十分に思います。。笑