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.

<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>

<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>

<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.

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' }}>
            <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>

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