ローディング中に表示させるクルクルのやつ

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

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

あわせて読みたい
槇村野菜笑店 外苑前駅近く、100以上の農家を訪ねて選び抜いた本当に美味しい野菜のみを扱う八百屋・槇村野菜笑店。有名なフレンチやレストランなどで絶大な支持を得ています。外苑前の...
目次

ロード中ですよー!を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をコピーしました!

この記事を書いた人

「@縁紡ぐ」にご訪問頂きありがとうございます。
業務改善やIT化、システム開発・プロジェクトチーム運用支援を行っています。
お気軽にご相談ください。

コメント

コメントする

CAPTCHA


目次