Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@hiro0218

1つのdivとCSSだけでローディングを作る方法

背景

  • シンプルなローディングで良い
  • メンテナビリティーを確保したい
  • ローディング要素が負荷にならないようにしたい

CSS だけでローディングを作成する

ローディング要素の要件

  • 円状の要素が回転しているもの
  • 画像や JavaScript は使用しない

完成イメージ

タイトルなし.gif

実装

完成イメージのようなローディングであれば CSS だけで実装するのは容易である。

大まかに重要な定義は以下の通り。

  1. 見た目を定義する
  2. 回転させる

見た目を定義する

まずは、適当な要素を用意し、上部のみアクシブなカラーになるような border のスタイルを当てていく。

image.png

<div class="loading"></div>
.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

丸くする

先述のままだと単なる四角い要素で一般的なローディング要素とは掛け離れている。

これにboder-radius: 50%を指定して丸くする。

image.png

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
}

回転させる

回転させたら完成。丸くなった要素を回転させるローディング要素にしか見えなくなる。

spinnerアニメーションを定義して.loadingに追加する。ローディング要素は延々と回転し続けて欲しいので、infiniteの指定を入れる。

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading {
  width: 5em;
  height: 5em;
  border-radius: 50%;
  border: 0.25em solid #ccc;
  border-top-color: #333;
  animation: spinner 1.5s linear infinite;
}

完成デモ

上記をブラッシュアップした完成でもを置いておく。

See the Pen Pure CSS Loading Image by hiro (@hiro0218) on CodePen.

ローディング要素が表示されているときに「アクションすることが出来ない」ことを伝えられるようなあしらいは必要だと思う。(例: cursor: progress;など)

まとめ

CSSですべて実装しているのでサイズや色の変更が容易である。アニメーションGIFやSVGなどを使って実装してきたが、これならデザイナーとのやりとり(修正と書き出し依頼)を省けるので局所的だが工数も下がるだろう。

リッチなアニメーションをしたい場合は当然 Lottie などのライブラリを利用して視覚的に楽しめるUIが良いだろう。ブランディング的な文脈はあるかもしれないが、ローディング要素はできるだけ人の目にふらさせる時間は短くしたいので簡素な見た目の要素でも良いのではないかと思う。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hiro0218
frontend developer
zozotech
70億人のファッションを技術の力で変えていく

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?