• Skip to main content
  • Skip to primary sidebar
  • ホーム
  • お問い合わせ

ハイパー仕事し隊

思い立った吉日!イロイロ試してオンリーワンの起業家を目指してます!

現在の場所:ホーム / ウェブアプリ関連 / ロード中にクルクル回るやつを CSS でコーディングしてみる

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

2018年5月4日

css spinner

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

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

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

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

いくつか呼び方はあるようですが、一般的な呼び名は 「スピナー(spinner)」 のようです。

動きがあるので、てっきり Javascript で実装しているのかと思ったのですが、CSS で簡単に作れるようです。

実際に書いてみたので、ぜひ参考にしてください!

自力で CSS を書く

overview

スピナーという名前がわかりましたが、ではどう書けばよいのか?

画像にあるオレンジ部分が、灰色の円の中をクルクルと回るサンプルで見ていきましょ。

こちらが実際の 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 で十分に思います。。笑

カテゴリー: ウェブアプリ関連
タグ: css

最初のサイドバー

簡単な自己紹介

ごく普通の 30 代サラリーマンです。世界を旅しながらの生活が目標!!
IT 全般に興味あり: Python (Flask, Django) / PHP (Laravel, Wordpress) / Golang / AWS / Network Security.
Read More…

サイト内検索

最近の投稿

  • 【VS Code プラグイン】Postman より便利!? Rest Client をオススメする理由
  • MySQL と phpMyAdmin を Docker Compose で作って、Python から接続する
  • Windows10 上の Ubuntu から “curl localhost” を実行すると “Connection refused” になる原因
  • リダイレクトの仕組み知ってる?Flask で調べるてみるのだ。
  • Apple 独自の 検索エンジンで何が変わるのか

アーカイブ

  • 2021年3月
  • 2021年1月
  • 2020年10月
  • 2019年3月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年5月
  • 2018年4月

タグ

amazon cloudfront amazon s3 aws coursera css django docker flask fullstack gcp github hawaii life in USA linux mongodb mysql postgresql pwa python sqlite vagrant

Contact
Privacy Policy and Term of Use
Copyright © 2025 · All rights reserved.