Spinner

An animated loading spinner with size and color variants.

Preview

Usage

<!-- Default (20px) -->
<span class="glass-spinner"></span>

<!-- Small (14px) -->
<span class="glass-spinner sm"></span>

<!-- Large (32px) -->
<span class="glass-spinner lg"></span>

<!-- Accent colored -->
<span class="glass-spinner vibrant"></span>

Size Variants

Modifier	Size	Border Width
`.sm`	14×14px	1.5px
(default)	20×20px	2px
`.lg`	32×32px	3px

Color Variant

Modifier	Effect
`.vibrant`	Uses `--glass-accent` for the spinning edge and a faint accent tint for the track

CSS Details

Border: 2px solid rgba(255,255,255,0.25) with border-top-color: currentColor
Animation: glass-spin — rotate(360deg) at 0.8s linear infinite
Display: inline-block, vertical-align: middle

Inline with Buttons

<button><span class="glass-spinner sm"></span> Loading...</button>