美しいローディングをCSSのみで実装する

真っ白に輝くドットがくるくる廻りながらブルーの尾を引く美しいローディング。
HTMLはdiv要素の一つだけ、あとはCSSを実装するだけで表現できます。

HTMLはdivだけの単一要素で実装します。

<div class="loader" role="alert" aria-live="assertive"></div>

ローディングのアニメーションは、CSSのみで実装されています。疑似要素でリングを作成し、それを要素に対してオフセットの白いドットを作成します。白いドットの輝きは疑似要素を使用し、オフセットを-50%に設定し、blurフィルターを適用しています。

:root {
  --hue: 210;
  --size: 100px;
  --border: 10px;
  --speed: 1s;
  --blur: var(--border);
}

body {
  background: hsl(var(--hue) 50% 8%);
}

.loader {
  width: var(--border);
  aspect-ratio: 1;
  background: white;
  border-radius: 50%;
  position: absolute;
  --y: calc((var(--size) * -0.5) + (var(--border) * 0.5));
  transform:
    rotate(0deg)
    translateY(var(--y));
  animation: spin var(--speed) infinite linear;
}

.loader::before {
  content: "";
  position: absolute;
  inset: calc(var(--border) * -0.5);
  border-radius: 50%;
  background: white;
  filter: blur(var(--blur));
  z-index: -1;
}

.loader::after {
  content: "";
  width: var(--size);
  aspect-ratio: 1;
  position: absolute;
  top: 0%;
  left: 50%;
  translate: -50% 0;
  background: conic-gradient(white, hsl(var(--hue), 100%, 70%), hsl(var(--hue), 100%, 10%), transparent 65%);
  border-radius: 50%;
  mask: radial-gradient(
    transparent calc(((var(--size) * 0.5) - var(--border)) - 1px),
    white calc((var(--size) * 0.5) - var(--border)));
}

@keyframes spin {
  to { transform: rotate(-360deg) translateY(var(--y)); }
}
inserted by FC2 system