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.
<div>
<ProgressBar progress={33} /><br/>
<ProgressBar progress={66} /><br/>
<ProgressBar progress={100} />
</div>
Colors
We can add colored variants to draw attention to particular statuses or for use in visualizations.
<div>
<ProgressBar progress={20} red /><br/>
<ProgressBar progress={40} yellow /><br/>
<ProgressBar progress={60} /><br/>
<ProgressBar progress={80} blue /><br/>
<ProgressBar progress={90} blueGrey /><br/>
<ProgressBar progress={100} green />
</div>
Small
A small progress bar can be used in information-dense screens to save screen real estate.
<div>
<ProgressBar progress={20} small red /><br/>
<ProgressBar progress={40} small yellow /><br/>
<ProgressBar progress={60} small /><br/>
<ProgressBar progress={80} small blue /><br/>
<ProgressBar progress={100} small green />
</div>
Indeterminate
Animating progress bars can effectively show system process as an indeterminate loading state. Used to show loading states between 1-10 seconds.
<div>
<ProgressBar indeterminate small />
</div>
Examples
<Mask
content={
<div className="m-t-1 m-b-1" style={{ textAlign: 'center' }}>
<ProgressBar indeterminate position='top' small />
<div className="m-b-2">
<img src="/images/pricebook-illustration.svg" />
</div>
<Headline size="small" className="m-b-1">Adding to Pricebook...</Headline>
<BodyText size="small">You can navigate away from this page and this process will continue.</BodyText>
</div>
}
>
<div style={{ height: '300px' }}></div>
</Mask>
<Mask
content={
<div className="m-t-1 m-b-1" style={{ textAlign: 'center' }}>
<div className="m-b-2">
<img src="/images/pricebook-illustration.svg" />
</div>
<Headline size="small" className="m-b-1">Syncing to Your Pricebook...</Headline>
<ProgressBar className="m-t-2 m-b-1" value="66" />
<BodyText size="xsmall" subdued>66% Complete</BodyText>
</div>
}
>
<div style={{ height: '300px' }}></div>
</Mask>
Importing
import { ProgressBar } from '@servicetitan/design-system';
