CSS animation で遊び倒す - Glowing Loading  -

CSS animation day 41となりました。

今回から、Loading メニューを作っていきます。


#1. 完成版

![ダウンロード (34).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/23d2519a-2deb-6c5a-d91f-4de73bed044f.gif)


<p class="codepen" data-height="300" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="BbKMMr" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Glowing Loader">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/BbKMMr/">
  Glowing Loader</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. なぜか？
Loading で待っている時間って、本当に辛いですよね。
この時に、面白いアニメーションが見れたら、どんなに素敵なことでしょう。外来の待合でもそうですが、ただ待たされるのではなく、ディズニーランドのように、待っている間にいかにワクワクできるかが、非常に重要と考えます。

#3. 参考文献
[Glowing Gradient Loader Ring Animation Effects | CSS Animation Tutorial](https://www.youtube.com/watch?v=jThaNv8pKDQ)
[CSS animation で遊び倒す - Beautiful Button -](https://qiita.com/duka/items/e758f977957d08334e69)
[CSS animation で遊び倒す　- 太陽 -](https://qiita.com/duka/items/108f5a32181920ae2972)
#4. 分解してみる


❶. 
マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="loader">
      <span></span>
    </div>
  </body>
</html>
```


```styles.scss
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  height: 100vh;
}

.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(#00c9ff, #92fe9d);
}
```

![スクリーンショット 2019-03-03 13.36.57.png](https://qiita-image-store.s3.amazonaws.com/0/232715/c86ac748-82fe-ab55-e1ad-4eaa5b3fd77e.png)


綺麗な丸ができました。
<br/>
❷.

では、円の中心に空洞をつくりましょう。

```styles.scss
.loader :before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: #000;
  border-radius: 50%;
}
```

![スクリーンショット 2019-03-03 13.36.34.png](https://qiita-image-store.s3.amazonaws.com/0/232715/97d61870-8758-813d-fddf-fc828fbc877d.png)


擬似要素beforeクラスを使い、中心に黒丸を作りました。
<br/>

❸.
では、アニメーションを作りましょう。

```styles.scss
.loader {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(#00f260, #0575e6);
  animation: roundMove 1s linear infinite;
}

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

![ダウンロード (33).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/c2a74af5-84e9-8577-f5ab-e1db7b372fd2.gif)

いい感じです。
<br/>

❹.
では最後に、blurをかけましょう。

```styles.scss
.loader :after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  width: 110px;
  height: 110px;
  background: linear-gradient(#00f260, #0575e6);
  border-radius: 50%;
  filter: blur(20px);
}
```

![ダウンロード (34).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/31af1f0d-6923-673c-9b27-d6db9062b9b4.gif)
 

できました！
simpleだけど、目を惹くデザインで、飽きないですね。　

それでは、また明日〜