波打つローダーの作成方法

CSS

波打つローダーの作成方法を紹介します。

目次から読む

デモ

See the Pen
波打つローダー by Sosak (@Sosak2021)
on CodePen.

HTML

    <div class="waving-loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span> <!-- 10-->
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span> <!-- 10-->
    </div>

divタグの中にspanタグを20個作成します。

SCSS


.waving-loader {
  position: relative;
  width: 400px;
  height: 400px;
  transform-style: preserve-3d; //3dのとき必要
  transform: perspective(800px) rotateX(60deg); //角度かえる

  & span {
    position: absolute;
    display: block;
    border: 2px solid #fff;
    border-radius: 50%;
    animation: animate 3s ease-in-out infinite;
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        top: ($i - 1) * 10px;
        left: ($i - 1) * 10px;
        bottom: ($i - 1) * 10px;
        right: ($i - 1) * 10px;
        animation-delay: ($i - 5) * 0.1s;
      }
    }
  }
}

@keyframes animate {
  0%,100% {
    transform: translateZ(-100px);
  }
  50% {
    transform: translateZ(100px);
  }
}

top、bottom、right、leftの値とanimation-delayの値をそれぞれ少しずつずらすことで波を打たせることができます。
円形はborder-radiusです。
角度を変えるため、transform-styleにpreserve-3dを設定し、transformでは、perspectiveにだいたい500px以上の値を設定して、rotateをセットします。
あとは、keyframesでtranslateZの値を上下させることで、それぞれのspanタグが移動します。

CSS

Posted by devsakaso