【初心者向け】超簡単なぐるぐる回るローディングアニメーションCSS

#はじめに
どうも、よわよわエンジニアです。
大晦日だというのになぜかQiitaを執筆する異常者です。
さて、今回はみなさん一度は目にしたことがある読み込み中の**アレ**について解説します。

##今回作るもの

ローディング中のこれ↓
<img width="1680" alt="スクリーンショット 2019-12-31 1.59.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/34252848-eb5e-4301-6eaf-32b28da6aa1f.png">

よくみかけるコレですが、
実は結構簡単にhtmlとcssで実装できちゃいます。
今回はアレンジしやすいように１個ずつ解説入りで説明したいと思いますので、
よければ手を動かしながら読んでください。

#実装

まずは背景の黒画面、そしてぐるぐるを真ん中に持ってくる記述から行きます。
**コメントは全て//で書きますので、コピペされる方は取り除いてあげてください。**

htmlの構成は以下の通り

```test.html
<!DOCTYPE html>
<html lang="ja"> 　　//日本語設定
<head>
  <meta charset="UTF-8">  //文字化け防止のおまじない
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> //レスポンシブ対応のおまじない
  <title>Test</title> //タイトル
  <link rel="stylesheet" type="text/css" href="style.css"></link> //css読み込みの宣言
</head>
<body>
  <div class="container">　//背景
    <div class="loader"></div>　//例のぐるぐる
    <p>Now loading...</p>　//ぐるぐる下の文字
  </div>
</body>
</html>
```

で、次にcssです。
現状はただの真っ黒い画面にしかならないとおもいますが、
ぐるぐるとNow loading...のもじが画面中央に配置さるよう設定しておきます。

```style.css
body {
  margin: 0;  //ブラウザ固有の余白を消します。
  padding: 0;　//同上
  box-sizing: border-box;　//余白のとりかたを指定。
  width: 100vw;　//表示画面の大きさを決めます。
  height: 100vh;　//同上
}

.container {
  background-color: black;　//背景色
  width: 100%;　//横幅を画面いっぱいに指定
  height: 100%;　//縦幅を・・・同上
  display: flex;　//flexBoxでレイアウト制御します。
  justify-content: center;　//左右中央に指定
  align-items: center;　//上下中央に指定
  flex-direction: column;　//ぐるぐると文字を縦並びにする指定
}
```

##ぐるぐる本体作成

以下を先ほどの記述の下に追加してください。
解説はこのあとすぐ！

```style.css
.loader {
  border: 12px solid #fafafa;　//12pxの白い四角をつくります
  border-radius: 50%;　//作った四角の角を丸めます
  width: 100px;　//ぐるぐるの大きさを決めます
  height: 100px;　//ぐるぐるの大きさを決めます
}

p{
  color: #fafafa;　//これはNow loading...の色指定なのでぐるぐるとはあまり関係ない
}
```
###解説
``border: 12px solid #fafafa;``
枠線を記述しています。
12pxの１本線で色が#fafafaだよって意味です。

``border-radius: 50%;``
先ほどの枠線の角をどれだけ丸めるか？っていう記述です。
丸にしたけりゃ問答無用で50%だと覚えておけばいいでしょう。

``width: 100px``
ぐるぐるの横幅をきめています。

``height: 100px``
ぐるぐるの縦幅をきめています。

さて、この時点で
<img width="1680" alt="スクリーンショット 2019-12-31 2.24.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/e5253abd-b47e-c059-3c71-fc204ed8513b.png">

こうなってたら成功です。
なんかそれっぽいですね！！！！

##色付け

では、先ほどのものに色付けをしていきましょう。
色付けは実は超簡単。以下の一文を追加してください。

```style.css
.loader {
  border: 12px solid #fafafa;
  border-radius: 50%;
  border-top: 12px solid #3498db;  //これを追加！！
  width: 100px;
  height: 100px;
}
```

###解説

``border-top: 12px solid #3498db``
ぐるぐるの上部に#3498dbという色のバーを追加するよという意味です。
**注意！！**このとき、boaderの大きさとborder-topの大きさは必ず同じにしてください。
今回なら12pxで揃えています。
<img width="1680" alt="スクリーンショット 2019-12-31 1.59.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550679/503eecf6-1eaa-5924-420c-6155ef5652f0.png">
こうなっていたら成功です。

##アニメーションの追加

ここまできたらあとはアニメーションを追加して終わりです。
あと一歩なんで、頑張って実装しましょう。

```style.css
.loader {
  border: 12px solid #fafafa;
  border-radius: 50%;
  border-top: 12px solid #3498db;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;  //これを追加！！！
}

@keyframes spin{
  0%{
    transform: rotate(0deg);  //アニメーション開始時にどういう状態か？
  }

  100%{
    transform: rotate(360deg);　//アニメーション終了時にどういう状態か？
  }
}
```

###解説

``animation: spin 1s linear infinite;``
animation: ``任意の名前`` ``何秒でアニメーションするか`` ``アニメーションの進行度`` ``無限ループするか？``
という感じで記述をしていきます。

``linear``とは、一定のスピードで動きますよーという意味です。
ここを、``ease-in`` や　``ease-out``　にしてみてください。
開始が遅くて終了間際に早くなったり、その逆になったりと面白い変化が見られます。 


``@keyframes spin``
これは先ほどつけた任意の名前に具体的にどういうアニメーションをつけるかという
アニメーションの設定みたいな記述です。

今回だと、0%のときに
``rotate(0deg)``と記述しているので、
アニメーション開始時には回転させない（０度地点にいる）という記述です。
そして、100%のときに
``rotate(360deg)``と記述しているので、
アニメーション終了時には360度回転した場所にいるよ。という意味です。

これを``infinite``で無限ループさせることでぐるぐる回っているように見えます。

[![Image from Gyazo](https://i.gyazo.com/00dd33a14e52018171e4245cf70e6860.gif)](https://gyazo.com/00dd33a14e52018171e4245cf70e6860)

こんな感じになったでしょうか？？

#いざアレンジ

ここまでで、解説自体は終了なんですが、
ここにアレンジを加えてみましょう。
自分だけのローディングアニメーションが完成します。

##例その１
[![Image from Gyazo](https://i.gyazo.com/34f48404155202d5a873e0ab35a6fcaa.gif)](https://gyazo.com/34f48404155202d5a873e0ab35a6fcaa)

THE定番の薄くなったりするアレです。
コードは以下の通り。

```style.css
.loader {
  border: 12px solid #fafafa;
  border-radius: 50%;
  border-top: 12px solid #000; //バーの色を背景色と同じに
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  0%{
    transform: rotate(0deg);
    opacity: 1;　//透明度を１００％
  }

  65%{
    transform: rotate(180deg);　//開始から65%の段階で半回転(180deg)する。さらに透明度を40%に設定
    opacity: 0.4;
  }

  100%{
    transform: rotate(360deg);
    opacity: 1;
  }
}
```

変更点は上記のコメントつけているところだけです。
これで、アニメーション開始時から65%たったタイミングでバーが真下にくるようになるので、
ゆったり始まって、さっと終わるアニメーションができます。
さらに、``opacity``の設定をしてあげることで、半透明になります。

##例その２
[![Image from Gyazo](https://i.gyazo.com/24883121cecde8705527ded34755fdd1.gif)](https://gyazo.com/24883121cecde8705527ded34755fdd1)

サイズと色が可変するあれです。
通常のローディング画面より「なんかかっこいい」ですね。
コード以下のとおり

```style.css

.loader {
  border: 15px solid #39d4ff;  //border-topは削除
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 2s linear infinite;　　//スピード遅く
}

@keyframes spin{
  0%{
    transform: rotate(0deg);
  }

  50%{　　　　　　　　　　　　　　　　   //５０％に変更
    transform: rotate(180deg);
    border-radius: 0%;　　　　　　   //四角にする
    width: 20px;　　　　　　　　　    //小さくする
    height: 20px;　　　　　　　　    //同上
    border: 5px double #061fd5;　 //ぐるぐるの線を二重線にし、細くしてくる
  }

  100%{
    transform: rotate(360deg);
  }
}
```

可変型なので、50%の段階で可変cssをしこたま仕込みました。
これで、大きさが可変するので、別途文字は固定してあります。


#最後に

いかがだったでしょうか？
普段は見かけたらイラっとするローディング画面でも、自分で作るとなると愛着沸きませんか？
htmlとcssだけでこんなに簡単にローディングアニメーションが実装できます。
なんかワクワクが止まりませんね！

CSSってかなり奥が深くて、知れば知るほどおもしろいです！
ぜひ、知る！という快感を味わってみて、アレンジして自分のページをかっこよくしてみてください！