概要

JavaScriptを使わずにコピペで済んでhtml+cssだけのLoadingグルグルを実装したい？

・・・あるよ

投稿しようと思ったきっかけ

業務でLoading画像にグラデーションしたいって言われて
勿論IE対応なのでfilterやmask-imageは使えない為
HTML+cssのみで15分くらいで提出したら「考えたら確かに！！って思うけど、その発想は無かった」って言われたので、
全世界の1人でも役に立てばと思い記事にしました。

実装方法は本当に簡単なのでどちらというとコードの内容より考え方のほうが大事かもですが、
とりあえずコードが欲しい方もいると思うで先にコード出しておきます。

その下に解説も入れておきます。

Loadingの実装


<div class="loading"></div>


@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

.loading {
  position: absolute;                 /* 良くわからなければ無くてもよい */
  width: 50px;                        /* 横幅 */
  height: 50px;                       /*  高さ */
  border: 10px solid #dddddd;         /* 線(上下左右)の太さ,形,色 */
  border-top-color: #aaaaaa;          /* 線(上)の色 */
  border-radius: 50%;                 /* 円形 */
  animation: 1s spin infinite linear; /* アニメーション指定(1秒1回転で一定の速度で永遠回るように指定) */
}

です。

一応各プロパティにコメントを入れたのでこれでわかる人は以降見る必要がないです。
※意味が分かる人からしたら当たり前かも知れませんが勿論IEでも動きます。

解説

ここから見る人はhtml、CSSが詳しくないよ、知らないよって人向けだと思います。
positionに関してはいろいろと覚えることが多く、
特にabsoluteに関しては、今までいろんな解説サイトには書いていない隠れ仕様があり
今までであったフロントエンジニアでそれ知っている人はまだあったことないです。
それの説明は今回言うような内容ではないので知らなくて問題ないです。
※そもそもその隠れ仕様を理解する必要は本質的に無いので・・・

先ず

  width: 50px;
  height: 50px;

は要素の横幅、高さ指定です。
これはそのままですね。

  border: 10px solid #dddddd;

これは先ほど指定した要素の上下左右に
10pxの直線を#ddd色で表示する指定です。

これによって先ほどの要素は縦横70pxとなります

(10px(上線)+50px(要素の高さ)}+10px(下線))、
(10px(右線)+50px(要素の横幅)}+10px(左線))ですね。

  border-top-color: #aaaaaa;

これは先ほど設定した線の上だけ#aaa色に上書きします。
先にborderより先にborder-top-colorを書くと色が#aaaaaaから#ddddddに上書きさせるので注意です。

ここまでで以下のようになると思います。

次に

  border-radius: 50%;

この指定で円形に変更します。
この指定は全部の角を指定してだけ丸くする指定です。

勿論、全部の角バラバラに細かく設定できますが今回は円形にするので各角を50%ずつ丸くします。
35px(全体の大きさ/2)って書いてもいいですが50%のほうが縦横、線の太さが変わっても崩れないのでこっちがいいかなって思います。
これで以下のように円形になると思います。

これをあとはその場で回れば完成ですね。
回す指定は

  animation: 1s spin infinite linear;

です。

これは1秒間(1s)にspinと設定されたアニメーションを永遠(infinite)に一定速度(linear)で行う指定です。

今回を何か終わるまで回り続けるので永遠(infinite)と指定しますが、回転する回数も指定できたと思います。
~~(忘れました・・・)~~

回転速度も一定速度(linear)とていますがそちらも変更可能です。
前半早くて後半遅いみたいな感じ・・・

spinとなずけられた指定は自分で作る必要があります。
どのようにアニメーションするかは自分で作る必要があるのでその動きにつけた名前をここに入れます。
今回はその場で1回転させるのでspinと命名しました。

その場で回転させる指定は以下です。

@keyframes spin {
  from{
    transform: rotateZ(0deg);         /* アニメーション開始状態 */
  }
  to{
    transform: rotateZ(360deg);       /* アニメーション終了状態 */
  }
}

@keyframesをつけるとアニメーションの動きを設定することが出来ます。
もっといろいろ機能はありますが、特に気にしなくても問題ありませんのでご安心を！！

@keyframesの右には一連のアニメーションに名前つけます。
今回はspinとしましたので、先ほどのanimationプロパティにはspinと書いたのです。

fromはアニメーションが開始するときの状態、
toはアニメーションが終了したときの状態を指定します。

transformは要素を変形させる指定でrotateZはZ軸を軸に回転角度を指定するものです。
今回は開始時を0度(0deg)、終了時を360度(360deg)とします。
円形の角度は360度なので、開始と終了の状態を同じでもその間(今回は1秒間かけて)角度が変わるのでその場で回っているように見えます。

今回は時計回りに回していますが、反時計回りにさせるときはtoを
transform: rotateZ(-360deg);
とすればよいです

これをanimationプロパティで永遠に毎秒1回転させるわけですね！！

最後に

まずはここまで読んでいただいてありがとうございます。
そして、日本語が拙かったりうまく表現されていなかった部分もあったかと思い申し訳ありません。
今回は簡単なLoadingになりますが、もっと凝ったものをhtml+cssのみ表現することが出来ます。
自分自身CSSを勉強するのは結構好きで、特にhtml+CSS(html5+css3)だけでアニメーションを作ったりすることが好きです。
普通のフロントエンジニアよりは少しだけ詳しいと思っている変わり者ですね。

今は、JavaScriptで要素に動きをつけなくてもCSSだけでデザインをすべて表現することができるのでもっと勉強していきたいですね。

またこのような記事に需要があったり備忘だったりで投稿しようと思います。

改めて、閲覧ありがとうございました！！

コピペで簡単、html+cssだけでLoadingグルグルマソを実装する方法

概要

投稿しようと思ったきっかけ

Loadingの実装

解説

最後に