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={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';