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

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

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

槇村野菜笑店
槇村野菜笑店 南青山・外苑前駅近く。20年以上日本全国の農家さんを回り、本当に美味しい野菜や果物を知り尽くした槇村が営む八百屋です。野菜がメインのお食事やランチのテイクアウト・...
目次

ロード中ですよー!を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);
    }
  }

画像なので分かりませんが、クルクル回っているようになりました。下のリンク先へいくと動きがわかります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次