bellhop by actabl

When to use

Use loaders to indicate that content is loading or processing.

Data Loading

Show while fetching data from an API or database.

Processing

Indicate that an operation is being performed.

Page Transitions

Display during navigation or route changes.

When not to use

  • When you can show placeholder content—use skeleton loader
  • For long-running processes—provide progress indication
  • When the wait is very short (under 300ms)—no loader needed
  • For page-level loading—use page loader or progress bar

Sizes

Loaders come in four sizes to suit different contexts.

Variants

Loaders can include messages and be used in different contexts.

With Message

Loader with custom loading message.

In Button

Small loader for button loading states.

Loading...

Best Practices

Follow these guidelines when using loaders.

Do

  • Use appropriate sizes for the context
  • Include helpful messages for longer operations
  • Center loaders in their container
  • Use loaders for operations that take > 1 second
  • Hide loader immediately when content is ready

Don't

  • Don't use loaders for very quick operations (< 300ms)
  • Don't show multiple loaders for the same operation
  • Don't use vague messages like "Please wait"
  • Don't keep showing loader after content has loaded

Accessibility

Loaders communicate loading states to all users.

Screen Reader

  • Loading state is announced with aria-live
  • Role of "status" or "alert" is used
  • Message text is communicated
  • Completion is announced when loading finishes

Visual Design

  • Animation provides clear visual feedback
  • Gradient colors ensure visibility
  • Message text has sufficient contrast

Resources

Design and development resources for the Loader Spinner component.

Figma

Available
View in Figma →

Web Components/Angular

Available
View in Storybook →

React

Available
View in Storybook →