Spinner

Spinners for short waits without structure preview (button actions, quick loads). Skeletons for longer loads showing content structure. Progress Bars when you can show percentage complete. Choose based on wait length and whether you can show progress or structure.

Show Spinners for operations over 1 second—anything shorter feels fine without feedback. For operations over 10 seconds, use Progress or Skeleton instead. Spinners communicate "working" but not "how much work remains".

Depends on context. For critical operations (saving, submitting), disable controls and show Spinner to prevent double-submission. For background loading (refreshing data), show subtle Spinner without blocking. Match blocking level to operation criticality.

Yes! Small Spinners work great inline in buttons ("Saving..."), next to loading content, or in table cells. This contextual loading is less disruptive than full-page Spinners and shows exactly what's loading.

Yes, when paired with proper ARIA attributes (role="status", aria-live="polite") and screen reader text like "Loading". Visual animation alone isn't enough—blind users need text announcements that something is happening.

Yes, this Figma Spinner component matches the shadcn/ui implementation exactly, ensuring your loading indicators work consistently from design to production with proper animations and accessibility.