Radii Loading

About

Loading states are the most under-designed part of any UI. Most apps have one spinner that gets reused everywhere — but there are 5 fundamentally different loading state types, and using the wrong one destroys perceived performance. Radii Loading teaches you which type to use and when, then generates the complete CSS + JSX for the chosen type. Every pattern includes prefers-reduced-motion, ARIA attributes, width-lock for buttons, and dark mode support. Just describe what you're building or paste your existing loader and get instant feedback or a complete new implementation.

What it does

• Covers all 5 loading state types: Spinner, Progress Bar, Skeleton Screen, Shimmer, and Inline/Button Loader
• Decision tree: "Do you know the progress %? Is it a button action? Is the content structured?" → picks the right type automatically
• Generates complete copy-paste CSS + JSX including @keyframes, prefers-reduced-motion, dark mode, and ARIA
• Button loader includes width lock: captures offsetWidth before showing spinner so layout never shifts
• Audit mode: paste existing loader code → get type diagnosis + specific fixes + accessibility checklist
• All 5 types are calibrated to Radii timing tokens (spinner: 800ms linear, skeleton wave: 1.5s ease-in-out)

Give it

• 1.A description of what is loading ("product card list", "file upload", "form submit button")
• 2.OR an existing loading state component to audit
• 3.Optional: framework preference (plain CSS, React JSX, or HTML)

Example output

**Type: Skeleton Screen** — content has predictable structure, loading > 1s

```css
.skeleton {
  background: linear-gradient(90deg, var(--color-ink-100) 25%, var(--color-ink-50) 50%, var(--color-ink-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--color-ink-100); }
}
```

```html
<div class="skeleton" style="height: 200px; border-radius: var(--radius-md)"></div>
<div class="skeleton skeleton-text" style="width: 60%"></div>
<div class="skeleton skeleton-text skeleton-text--short"></div>
```