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

1. 完成版

See the Pen Sun Loading by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

Glowing Loader Ring Animation - Pure CSS Animation Effects - How To Create CSS3 Spinning Preloader

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;
}

・ポイントとして、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;
}

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

styles.scss

.loading {

     ・・・

  border: 3px solid #000;

}

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

}

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

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

styles.scss

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

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

いい感じですね！

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

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;
}

いい感じですね！
もうちょっと表現力をあげます。
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);
  }
}

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

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

1. 完成版

2. 参考文献

3. 分解してみる