Loading

Loading indicators and spinners for showing async operations and wait states

Basic Loading

Simple loading spinners with different variants

Show Code

Loading Sizes

Different sizes for various contexts

Show Code

Loading Colors

Various color themes

Show Code

Loading Variants

Different animation styles

Show Code

Loading with Text

Loading indicators with accompanying text

Show Code

Usage Notes

  • Choose appropriate variant based on design context and space available
  • Use consistent sizes within the same interface section
  • Consider accessibility by providing proper aria labels for screen readers
  • Combine with text labels to provide context about what's loading
  • Use colors sparingly - neutral colors work best for most cases
  • Position loading indicators where users expect to see content appear