You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
components / Status and Feedback

Progress Bar

Basic Progress Bar

The most basic implementation of a progress bar is cyan. We use cyan progress bars for neutral actions such as save states or system progress.

Colors

We can add colored variants to draw attention to particular statuses or for use in visualizations.

Small

A small progress bar can be used in information-dense screens to save screen real estate.

Indeterminate

Animating progress bars can effectively show system process as an indeterminate loading state. Used to show loading states between 1-10 seconds.


Examples


Importing

import { ProgressBar } from '@servicetitan/design-system';