CSS animation で遊び倒す - Glowing Loading 2 -

CSS animation day 42となりました。
本日もローディングを作っていきます。


#1. 完成版

![ezgif.com-optimize (12).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/3b1724d4-ab4f-9eb0-40ca-3a0d9b2d60a6.gif)

<p class="codepen" data-height="459" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="BbLPBd" style="height: 459px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Sun Loading">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/BbLPBd/">
  Sun Loading</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. 参考文献
[Glowing Loader Ring Animation - Pure CSS Animation Effects - How To Create CSS3 Spinning Preloader](https://www.youtube.com/watch?v=qB_EEdcj6-U)

#3. 分解してみる

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

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


```styles.scss
body {
  margin: 0;
  padding: 0;
  background: #000;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: transparent;
  border: 3px solid #fffccc;
  border-radius: 50%;
  text-align: center;
  line-height: 300px;
  font-size: 42px;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #fffccc;
  color: #fffccc;
}
```
![スクリーンショット 2019-03-05 7.16.48.png](https://qiita-image-store.s3.amazonaws.com/0/232715/ea309279-d31d-909d-38b6-ee522406ab8c.png)


・ポイントとして、text-shadowで影をつけることによって、ネオンの光のような光を表現できます。


❷.
周りの円周にそって、アニメーションが動くようにしましょう。

```styles.scss

.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid #fff000;
}
```

![スクリーンショット 2019-03-05 7.23.43.png](https://qiita-image-store.s3.amazonaws.com/0/232715/3da5550b-3e5f-1669-c46e-d5e0010de451.png)



擬似クラスで、境界の上だけborder が出るようにしました。
では、こいつを丸くして、 .loadingの境界を背景色(黒)にしましょう。

```styles.scss
.loading {
     
     ・・・

  border: 3px solid #000;
 
}

.loading:before {
　　　・・・
  border-radius: 50%;

}

```

![スクリーンショット 2019-03-05 14.02.49.png](https://qiita-image-store.s3.amazonaws.com/0/232715/bad9a1b8-b471-5754-b5d4-127f31f7408e.png)


三日月のようで綺麗ですね。

❸.
アニメーションをつけましょう。

```styles.scss
.loading:before {
　　　・・・
  border-radius: 50%;
  animation: move 2s linear infinite;
}

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

```

![ダウンロード (37).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/dcbfe53f-3983-5b2f-36e8-14825a544469.gif)

いい感じですね！

❹.
表現力をあげます。
もう一つ、逆回転で回る円を作りましょう。

```styles.scss

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-bottom: 5px solid #ff4500;
  animation: move 2s linear infinite;
}
```

![ダウンロード (38).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f4d1ca19-a336-803f-96cb-691fd7870341.gif)

いい感じですね！
もうちょっと表現力をあげます。
animation-timing-function を、ease-in/ease-out でずらします。
さらに、blur をかけましょう。

```styles.scss

.loading:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 3px solid #fff000;
  animation: move 2s ease-in infinite;
}

.loading:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-top: 5px solid #fff000;
  box-shadow: 0 0 10px #fff000;
  filter: blur(20px);
  animation: move 2s ease-in infinite;
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
}

span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border-bottom: 5px solid #ff4500;
  animation: move 2s ease-out infinite;
}
```

リファクタリングして、完成です！

```styles.scss
@mixin pos {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;
  text-align: center;
  line-height: 300px;
  font-size: 35px;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #fffccc;
  color: #fffccc;

  &:before {
    @include pos;
    border-top: 3px solid #fff000;
    animation: move 2s ease-in infinite;
  }

  &:after {
    @include pos;
    border-top: 5px solid #fff000;
    box-shadow: 0 0 10px #fff000;
    filter: blur(20px);
    animation: move 2s ease-in infinite;
  }
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: transparent;
  border: 3px solid #000;
  border-radius: 50%;

  &:before {
    @include pos;
    border-bottom: 5px solid #ff4500;
    animation: move 2s ease-out infinite;
  }
}

@keyframes move {
  100% {
    transform: rotate(360deg);
  }
}
```
![ezgif.com-optimize (12).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e40492fa-6b52-a24b-fec4-1e1ae040e3b6.gif)


いい感じですね！　
それではまた明日〜