三角関数を駆使してCSSだけでローディングスピナーを作ろう！

8つの丸が回転しているように見えるローディングスピナーをCSSだけで実装します。

CSSの値関数にsin()やcos()といった数学関数があるのでこちらを使用します。

CSS 値関数 - CSS | MDN⁠（新しいタブで開く）

まず、ローディングスピナーの領域を確保するdivタグを作り、クラス名はloading-spinnerとしておきます。

1<div class="loading-spinner"></div>

.loading-spinnerの子要素に、ドットを構成するspanタグを設置したいドットの数だけ追加します（今回は8つにします）。クラス名はdotとしておきます。
また、それぞれの.dotのstyle属性にインデックス番号を指定したカスタムプロパティを設定します。
カスタムプロパティは--iとし（indexの頭文字）、インデックス番号なので値は0〜7を順に指定します。

1<div class="loading-spinner">2  <span class="dot" style="--i: 0"></span>3  <span class="dot" style="--i: 1"></span>4  <span class="dot" style="--i: 2"></span>5  <span class="dot" style="--i: 3"></span>6  <span class="dot" style="--i: 4"></span>7  <span class="dot" style="--i: 5"></span>8  <span class="dot" style="--i: 6"></span>9  <span class="dot" style="--i: 7"></span>10</div>

ちなみに、今回必要なHTMLをEmmet⁠（新しいタブで開く）でまとめて記述したい場合は以下のように記述してからTabキーを押してください。

1.loading-spinner>span.dot[style="--i: $@0"]*8

丸の数やサイズを変えたいときにコード内を行き来して編集箇所を探す手間を省くために、ローディングスピナーのルート要素となる.loading-spinnerにカスタムプロパティを定義します。

スピナーやドットのサイズやドットの数を変えたいときはここを編集することで調整できるようになります。

--spinnerRadiusは直径を2で割って半径を求めているので変更しないようにしてください（直径と分けて指定すると、サイズを変えるたびに両方を直す手間が増えてしまいます）。

1.loading-spinner {2  --spinnerDiameter: 40px; /* スピナーの直径 */3  --spinnerRadius: calc(var(--spinnerDiameter) / 2); /* スピナーの半径 */4  --dotCount: 8; /* ドットの数 */5  --dotDiameter: 8px; /* ドットの直径 */6}

.loading-spinnerのCSSを書いていきます。

• .dotをposition: absolute;で配置していくので、外枠を基準とするためにposition: relative;を指定します。
• スピナーのサイズは--spinnerDiameterで定義しているので、width: var(--spinnerDiameter);を指定します。
• スピナーは正円にするため、aspect-ratio: 1;を指定します。

  ※万が一高さが合わない場合は、代わりにheight: var(--spinnerDiameter);を指定します。

1.loading-spinner {2  /* (省略)カスタムプロパティの定義 */3  4  position: relative;5  width: var(--spinnerDiameter);6  aspect-ratio: 1; /* 高さが合わない場合はheightにする */7}

まずドットを円周上に等間隔で配置するために、高校数学で学習する三角関数についてのおさらいをしておきます。

x軸の正方向から角度θだけ傾いた直線が、半径rの円の円周と交わる位置(α, β)に点を配置することを考えます。

半径rの円周上の点を、角度θと半径rで表す

半径1の単位円のときは(x, y) = (cos θ, sin θ)となるので、半径rの場合は以下のように表せます。

.dotのCSSを書いていきます。

• 幅を指定するためにdisplay: inline-block;を指定します。
• width: var(--dotDiameter);とaspect-ratio: 1;を指定して、ドットを作ります。

  ※万が一高さが合わない場合は、代わりにheight: var(--dotDiameter);を指定します。

• ドットの色はbackground-color: #ededed;でグレーを指定しておきます。
• ドットは正円にしたいのでborder-radius: 50%;を指定します。
• 円の中央にドットを配置するために、position, top, left, translateを指定します。

1.dot {2  position: absolute;3  top: 50%;4  left: 50%;5  translate: -50% -50%;6  display: inline-block;7  width: var(--dotDiameter);8  aspect-ratio: 1;9  background-color: #ededed;10  border-radius: 50%;11}

ドットは円周上に等間隔に並べるので、隣り合うドットの間の角度θは、360°をドットの数nで割った値になります。
これを後ほど--angleとしてカスタムプロパティを定義します。

（nはドットの数）

次に、x軸の正方向からθ傾いた位置にあるドットの座標(α, β)を求めます。こちらは三角関数のセクションに記載しているように以下のとおりになります。
これを後ほど--x, --yとしてカスタムプロパティを定義します。

これらを踏まえて、.dotにCSSを追加します。
--angleは先ほどの360° ÷ nにインデックス番号（--i）をかけることで、8つのドットを円周上に均等に配置しています。

また、translateを記載のとおり差し替えます。--xと--yが円周上の位置を示していますが、このままだと全体が右下にずれてしまいます。
そのため、元々指定していたようにx軸、y軸ともに-50%ずらします。

1.dot {2  --angle: calc((360deg / var(--dotCount)) * var(--i));3  --x: calc(var(--spinnerRadius) * cos(var(--angle))); /* r cosθ */4  --y: calc(var(--spinnerRadius) * sin(var(--angle))); /* r sinθ */5  6  /* (省略)先ほど追加したCSS */7  8  translate: -50% -50%; /* 削除 */9  translate: calc(var(--x) - 50%) calc(var(--y) - 50%); /* 追加 */10}

これで円周上に8つのドットを均等に配置することができました。

以下の画像はわかりやすいように色を変えていますが、ドットの中心が円周上に乗るようにしているため、ローディングスピナーの領域（グレーの四角）からドットの半径の長さ分はみ出しています。
そこで.loading-spinnerにpaddingを追加します。また、box-sizing: border-box;だとpaddingの値もwidthに含むため、widthも本来のサイズに加えてドットの半径分の長さを左右に加算します。
すなわち、ドットの半径2つ分の長さを加算することになるので、ドットの直径を加算した記述にしています。

ローディングスピナーのサイズに対して、上下左右が半径の長さだけ外にはみ出している

1.loading-spinner {2  /* (省略)指定済みのCSS */3  4  width: calc(var(--spinnerDiameter) + var(--dotDiameter));5  padding: calc(var(--dotDiameter) / 2);6}

最後にドットにアニメーションを追加します。

まずサイズと色が変化するキーフレームアニメーションを指定します。
scaleは0%と100%のときに0にしたいので、.dotに追記します。

--delayは8個すべてで異なる値にならないと複数のドットが同時に拡大・縮小してしまうので、--durationには1周にかかる時間を指定し、それを8分割してそれぞれのドットに割り当てる指定にします。こうすることで、1周（1秒）の1/8（0.125秒）ずつずれてドットが動くようになります。

1.dot {2  scale: 0;34  /* Animation Settings */5  --duration: 1s; /* 1周にかかる時間 */6  --delay: calc(var(--duration) * (var(--i) / var(--dotCount)));7  animation: loadingAnimation var(--duration) var(--delay) infinite ease-in-out;8}910@keyframes loadingAnimation {11  50% {12    scale: 1;13    background-color: #7e7e7e;14  }15}

これでローディングスピナーの完成です。

sin()とcos()は、Chrome 111、Firefox 108、Safari 15.4から対応しています。translateとscaleのプロパティは、それより前から対応しています。

CodePenのプレビューが完成品になります。

※CSSの記述がここまでの解説と異なっていますが、リセットCSSやベースCSSを追加しているので、実際にはspinnerレイヤーの中のみ使用していただければ実装できます。

1<div class="loading-spinner">2  <span class="dot" style="--i: 0"></span>3  <span class="dot" style="--i: 1"></span>4  <span class="dot" style="--i: 2"></span>5  <span class="dot" style="--i: 3"></span>6  <span class="dot" style="--i: 4"></span>7  <span class="dot" style="--i: 5"></span>8  <span class="dot" style="--i: 6"></span>9  <span class="dot" style="--i: 7"></span>10</div>

1* {2  box-sizing: border-box;3}4.loading-spinner {5  --spinnerDiameter: 40px; /* スピナーの直径 */6  --spinnerRadius: calc(var(--spinnerDiameter) / 2); /* スピナーの半径 */7  --dotCount: 8; /* ドットの数 */8  --dotDiameter: 8px; /* ドットの直径 */9  10  position: relative;11  width: calc(var(--spinnerDiameter) + var(--dotDiameter));12  aspect-ratio: 1;13  padding: calc(var(--dotDiameter) / 2);14}15.dot {16  --angle: calc((360deg / var(--dotCount)) * var(--i));17  --x: calc(var(--spinnerRadius) * cos(var(--angle))); /* r cosθ */18  --y: calc(var(--spinnerRadius) * sin(var(--angle))); /* r sinθ */19  20  position: absolute;21  top: 50%;22  left: 50%;23  translate: calc(var(--x) - 50%) calc(var(--y) - 50%);24  scale: 0;25  display: inline-block;26  width: var(--dotDiameter);27  aspect-ratio: 1;28  background: #ededed;29  border-radius: 50%;30  31  /* Animation Settings */32  --duration: 1s;33  --delay: calc(var(--duration) * (var(--i) / var(--dotCount)));34  animation: loadingAnimation var(--duration) var(--delay) infinite ease-in-out;35}3637@keyframes loadingAnimation {38  50% {39    scale: 1;40    background-color: #7e7e7e;41  }42}

• 三角比・三角関数の公式を単位円と関連づけて理解する｜関谷 翔⁠（新しいタブで開く）
• sin() - CSS | MDN⁠（新しいタブで開く）