HTML1行だけで、様々なローディングアニメーションを実装できるCSSジェネレーターを紹介します。
⇒CSS Loaders
よくありそうなシンプルなものから、CSSだけで表現されているとは思えない複雑なものまで、バラエティ豊かに用意されています。
使い方はとても簡単。
HTMLはたった1行です。
<div class="loader"></div>
cssは対象をクリックしてコピペするだけ。
中身はこんな感じ。
.loader {
width: 50px;
--b: 8px;
aspect-ratio: 1;
border-radius: 50%;
background: #514b82;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}
width: 50px;
--b: 8px;
aspect-ratio: 1;
border-radius: 50%;
background: #514b82;
-webkit-mask:
repeating-conic-gradient(#0000 0deg,#000 1deg 70deg,#0000 71deg 90deg),
radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: l5 1s infinite;
}
@keyframes l5 {to{transform: rotate(.5turn)}}
CSSなので、色を変えるのも簡単です。