Basic

Progress Circle is used to display percentage. It can be used to represent the data or the completion of a task or an operation.

<Stack spacing={2}>
    <ProgressCircle style={{maxWidth: 120}} progress={33}>33%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={66}>60%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={100}>100%</ProgressCircle>
</Stack>

Colors

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

<Stack spacing={2}>
    <ProgressCircle style={{maxWidth: 120}} progress={20} color='red'>20%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={40} color='yellow'>40%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={60}>60%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={80} color='blue'>80%</ProgressCircle>
    <ProgressCircle style={{maxWidth: 120}} progress={100} color='green'>100%</ProgressCircle>
</Stack>

Size

Progress Circle does not have specified sizes, it fills the available width the parent container allows.

<Stack spacing={3}>
    <Card>
        <Card.Section style={{height: '100%', boxSizing: 'border-box'}} className='d-f justify-content-center'>
                <ProgressCircle style={{minWidth: 80}} progress={33}>33%</ProgressCircle>
        </Card.Section>
    </Card>
    <Card>
        <Card.Section style={{height: '100%', boxSizing: 'border-box'}} className='d-f justify-content-center'>
                <ProgressCircle style={{minWidth: 80}} progress={66}>66%</ProgressCircle>
        </Card.Section>
    </Card>
    <Card>
        <Card.Section style={{height: '100%', boxSizing: 'border-box'}} className='d-f justify-content-center'>
                <ProgressCircle style={{minWidth: 80}} progress={100}>100%</ProgressCircle>
        </Card.Section>
    </Card>
</Stack>

Examples

<div style={{width: 150}}>
    <ProgressCircle progress={33}>
        <Stack alignItems='center' justifyContent='center' direction='column'>
            33%
            <Eyebrow>in-progress</Eyebrow>
        </Stack>
    </ProgressCircle>
</div>
<Stack spacing={3}>
    <Card style={{width: 400}}>
        <Stack spacing={3} alignItems='center'>
            <Stack.Item style={{maxWidth: 70}}>
            <ProgressCircle progress={50} color='green'>50%</ProgressCircle>
            </Stack.Item>
            <Stack.Item>
                <Headline>Job Status</Headline>
                <Eyebrow>5 Done | 5 Not Done</Eyebrow>
            </Stack.Item>
        </Stack>
        <hr style={{border: '1px solid #eeeeee'}} className='m-y-3' />
        <Stack spacing={3} direction='column'>
            <Card style={{
                backgroundColor: '#E3FCFF',
                border: '1px solid #0CA5C0',
            }}>
                <Headline className='c-cyan-500 m-0 align-items-center d-f'>
                    <Icon name='schedule' size='24px' className='m-r-1'/> Scheduled
                </Headline>
            </Card>
            <ToggleSwitch
                checked
                label='Job Notification'
            />
        </Stack>
    </Card>
</Stack>

Importing

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