四角がクルクル回るローダーの実装方法

ウェブサイトの読み込み中に表示されるローディングアニメーションは、ユーザーに待ち時間を感じさせにくくする効果があります。今回は、四角形がクルクルと回転するローダーをCSSで簡単に作成する方法を解説します。

1. CSSコードの全体構成

まず、今回使用するCSSコードは以下の通りです。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 100px;
  height: 100px;
  display: block;
  background-color: aqua;
  animation: flip 2s ease-in-out infinite;
}

@keyframes flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
  }
}

2. 各プロパティの解説

.wrapper
四角形の要素です。この四角形が回転するローダーとして機能します。

width と height: 100pxの正方形に設定しています。
background-color: aqua;: 四角形の背景色をアクアに設定しています。
animation: flip 2s ease-in-out infinite;: 2秒で1回転するアニメーションを無限に繰り返す設定です。

@keyframes flip
flipというアニメーションのキーフレームを定義しています。perspective(120px)は、3D効果を加えるための視点距離です。以下の各ステップで、四角形が3D空間で回転します。

0%: 初期状態。

25%: X軸に180度回転。

50%: X軸、Y軸の両方に180度回転。

75%: X軸は元に戻り、Y軸は180度回転。

100%: Y軸に360度回転し、元の位置に戻ります。

3. 実装例

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  width: 100px;
  height: 100px;
  display: block;
  background-color: aqua;
  animation: flip 2s ease-in-out infinite;
}
@keyframes flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
  }
}
</style>
<div class="container">
  <div class="wrapper"></div>
</div>

このHTMLコードで、回転する四角形のローダーが表示されます。

4. まとめ

このようなクルクル回る四角形のローダーは、シンプルなデザインながら視覚的に動きがあり、ユーザーが待機していることを示すのに効果的です。keyframesを使ったCSSアニメーションは、ブラウザ上で軽量かつスムーズに動作するので、読み込みが長いページなどに適しています。

お知らせ

私たちは、初台、幡ヶ谷、笹塚、代々木エリアでWebサイト制作やLP制作を行っています。これらの地域にお住まいの方や、事業を展開している企業・飲食店様・お店を持たれている方に向けて、Webサイト制作やホームページ制作、さらに企業向けのコーポレートサイト制作を提供しています。お問い合わせなどの目的に合わせたデザイン性の高いLP制作も承っております。

この地域に特化したサービスを提供することで、地域のビジネスがオンラインで成長できるようサポートしています。また、地域のお客様向けに特別なプランもご用意しておりますので、興味のある方はぜひお問い合わせください。

お問い合わせいただければ、詳細なご提案やお得なプランについて、丁寧にご案内いたします。初台、幡ヶ谷、笹塚、代々木エリアの皆様、お気軽にご相談ください。