CSSをコピペするだけで簡単に実装できる！ディズニーからインスピレーションを得た、美しいローディング

サイト構築 -CSS

Post on:2023年10月23日

sponsors

Adobe Fireflyで生成して動かす！リッチな広告バナーの効率的な制作ステップ Adobe Firefly Camp

真っ白に輝くドットがくるくる廻りながらブルーの尾を引く、ディズニーからインスピレーションを得て実装されたローディングを紹介します。

HTMLはdiv要素の一つだけ、あとはCSSをコピペするだけで実装できます。

実際の動作は、デモページでご覧ください。

See the Pen
Disney Style CSS Loader 🤙 by coliss (@coliss)
on CodePen.

実装のポイントは、まずHTMLはdivだけの単一要素で実装していること。

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

1	<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)); }
}

: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)); }

}

元ネタは、下記ポストより。

Here's that @CodePen link! 🚀

Change the --hue custom property to give it a different base color 🤙https://t.co/BaaVQVXa28

— jhey ▲🐻🎈 (@jh3yy) October 16, 2023