【初心者向け】超簡単!ローディング中に表示させるクルクル実装方法

最近のホームページでは、動画や画像がたくさん使われるようになってきています。ただ、通信環境やデバイスによって表示させるまで時間がかかる時に、読込中ですよーって表示されるアニメーションを作ってみたいと思います。

こちらのサイトでは、〇がくるくると描かれることでロード中を表現していますね。

ロード中ですよー！をCSSで表現する

とりあえずHTMLを作ります。

<section class="container">
  <div class="loader"></div>
</section>

CSSで〇作ります。

  .loader {
    width: 40px;
    height: 40px;
    /* 丸み */
    border-radius: 50%;
    /* 線の太さ */
    border: solid 4px;
  }

丸の線に分割して、透明度があるところをつくります。

  .loader {
    width: 40px;
    height: 40px;
    /* 丸み */
    border-radius: 50%;
    /* 線の太さ */
    border: solid 4px;
    /* 線の色 */
    border-color: #000000 #00000010 #00000010;
  }

次に、animationとkeyframe　を追加してアニメーションがくりかえし実行されるようにします。

  .loader {
    width: 40px;
    height: 40px;
    /* 丸み */
    border-radius: 50%;
    /* 線の太さ */
    border: solid 4px;
    /* 線の色 */
    border-color: #000000 #00000010 #00000010;
    /* keyframes */
    animation-name: spin;
    animation-duration: 1.5s;
    /* 無限にくりかえす */
    animation-iteration-count: infinite;
    /* 一定の速度でくりかえす */
    animation-timing-function: linear;
  }
  
  @keyframes spin {
    to {
        /* 時計まわりに360度回す */
      transform: rotate(360deg);
    }
  }