2024-11-01

ローディングスピナー1

常時CSSのみアイコンローディング回転系

ローディング中などに表示されるクルクル回るアイコンです。

実装のポイント

長方形の要素の右側に丸いドットをbackground-image: radial-gradient()で描いています。ドットとは要素の右に配置し、左端を起点（transform-origin）として要素を回転させることでドットが円周しているように見せています。

▼ 長方形の要素とドットの位置の関係要素の右にドットが位置している

コード例では CSS のみで行いましたが、ドットを画像で作れば好きな形状のものでクルクル回せます。

イージング関数は独自のものを設定しています。既成のease-in-outなどは始点と終点での速度が 0 になり、円周移動が一瞬止まってしまいます。ある程度速度を維持したまま続けたいのでcubic-bezier(0.7, 0.3, 0.3, 0.7)という関数にしています。

インデックスによるディレイをかけていますが、全体デュレーションとうまく調整することで、先頭と末尾がいい感じに付かず離れずの関係になります。

コード例

<div class="dotWrapper">
  <div class="dot" style="--index: 1"></div>
  <div class="dot" style="--index: 2"></div>
  <div class="dot" style="--index: 3"></div>
  <div class="dot" style="--index: 4"></div>
  <div class="dot" style="--index: 5"></div>
  <div class="dot" style="--index: 6"></div>
</div>

.dotWrapper {
  position: relative;
  animation-name: rotation;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  rotate: -90deg;
}

.dot {
  position: absolute;
  width: 36px;
  height: 12px;
  background-image: radial-gradient(
    circle at 24px 50%,
    #363636 0,
    #363636 4px,
    transparent 4px
  );
  background-size: 36px 12px;
  background-repeat: no-repeat;
  transform-origin: 0 50%;
  animation-name: rotation;
  animation-duration: 1.8s;
  animation-timing-function: cubic-bezier(0.7, 0.3, 0.3, 0.7);
  animation-iteration-count: infinite;
  animation-delay: calc(var(--index) * 0.2s);
  opacity: calc(1 - var(--index) * 0.1);
  rotate: -90deg;
}

@keyframes rotation {
  0% {
    rotate: -90deg;
  }
  100% {
    rotate: 270deg;
  }
}

ローディングスピナー1

実装のポイント

コード例

HTML

CSS

関連作例