: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
![CSSをコピペするだけで簡単に実装できる! ディズニーからインスピレーションを得た、美しいローディング](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5bf785c3d4d308e3f3ef61cc5e95bb4b506a7a4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202304%2F2023102101%402x.gif)