Get Started

Foundations

Components

Accordion

App Drawer

App Header

Badge

Buttons

Calendar

Checkbox

Contextual Menu

Control Bar

Data List

Data Table

Date Picker

Draggable List

Dropdown Button

Dropdown Select

Dynamic Search

Empty State

File Drop

Filter Bar

Filter Panel

Flash

Icon Button

Infotip

Inline Loader

Inputs

Interactive Card

Issue Indicator

Loader

Menu Bar

Message Card

Middle Truncate

Modal

Pagination

Panel

Picklist

Pill

Progress Bar

Quick FIlters

Radio

Rich Text Editor

Row Selector

Segment Control

Skeleton Loader

Step Progress Bar

Tabs

Text Truncate

Title Bar

Toggle Switch

Tooltip

Tree Selector

Patterns

Content Design

Search docs…

Search docs…

Get Started

Foundations

Components

Accordion

App Drawer

App Header

Badge

Buttons

Calendar

Checkbox

Contextual Menu

Control Bar

Data List

Data Table

Date Picker

Draggable List

Dropdown Button

Dropdown Select

Dynamic Search

Empty State

File Drop

Filter Bar

Filter Panel

Flash

Icon Button

Infotip

Inline Loader

Inputs

Interactive Card

Issue Indicator

Loader

Menu Bar

Message Card

Middle Truncate

Modal

Pagination

Panel

Picklist

Pill

Progress Bar

Quick FIlters

Radio

Rich Text Editor

Row Selector

Segment Control

Skeleton Loader

Step Progress Bar

Tabs

Text Truncate

Title Bar

Toggle Switch

Tooltip

Tree Selector

Patterns

Content Design

Ready

Loader

Loaders inform the user that the app is in a working state while retrieving information or performing an action.

View in Storybook

Ready

Loader

Loaders inform the user that the app is in a working state while retrieving information or performing an action.

View in Storybook

Ready

Loader

Loaders inform the user that the app is in a working state while retrieving information or performing an action.

View in Storybook

Variants

Variants

Variants



More

More

More

Related Components

Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Ready

Progress Bar

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Ready

Inline Loader

An inline loader is a UI component that indicates that small text elements within an interface are still in the process of loading, providing visual feedback to the user.

Ready

Inline Loader

An inline loader is a UI component that indicates that small text elements within an interface are still in the process of loading, providing visual feedback to the user.

Ready

Inline Loader

An inline loader is a UI component that indicates that small text elements within an interface are still in the process of loading, providing visual feedback to the user.

Additional Reading

  1. World Leaders in Research-Based User Experience. “Progress Indicators Make a Slow System Less Insufferable.” Nielson Norman Group, https://www.nngroup.com/articles/progress-indicators/.

  2. Smashing Magazine. “Best Practices for Animated Loading Indicators.” Nick Babich, https://www.smashingmagazine.com/2016/12/best-practices-for-animated-progress-indicators/.

  3. World Leaders in Research-Based User Experience. “Response Times: 3 Important Time Limits.” Nielson Norman Group, https://www.nngroup.com/articles/response-times-3-important-limits/.

Previous

undefined

Next

undefined

Previous

undefined

Next

undefined

Previous

undefined

Next

undefined

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies

Slack

© 2025 Basis Technologies

Slack

© 2025 Basis Technologies

Slack

Overview

Variants

More

Overview

Variants

More

Overview

Variants

More