semi-design/content/feedback/progress/index-en-US.md

---

localeCode: en-US order: 63 category: Feedback title: Progress subTitle: Progress icon: doc-progress width: 60%

brief: Show the current progress of the operation.

When to use

Display the current progress and state of the operation for the user when the operation takes a long time to complete

Demos

How to import

import { Progress } from '@douyinfe/semi-ui';

Standard progress bar

Use stroke Property to control the filling color of the progress bar
Use Percent Property to control completed progress
Use size Property control progress bar size
If the preset size is not satisfied, You can pass height to customize the height of the progress bar through style property.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <div style={{ width: 200 }}>
        <Progress percent={10} stroke='#fc8800' />
        <br/>
        <Progress percent={25} stroke='#f93920' />
        <br/>
        <Progress percent={50} />
        <br/>
        <Progress percent={80} />
        <br/>
        <Progress percent={80} size='large' />
        <br/>
        <Progress percent={80} style={{ height: '8px' }}/>
    </div>
)

Show percentage text

You can control whether to show percentage number through the showInfo property In addition, you can format the percentage text show through format.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <div style={{ width: 200 }}>
        <Progress percent={10} stroke='#fc8800' showInfo={true}/>
        <br/>
        <Progress percent={25} stroke='#f93920' showInfo={true}/>
        <br/>
        <Progress percent={50} showInfo={true}/>
        <br/>
        <Progress percent={50} showInfo={true} format={percent => (percent*10) + '‰'}/>
    </div>
)

Vertical progress bar

You can use vertical progress bar by setting direction='vertical' If preset width is not satisfied, you can pass width to customize the width of the vertical progress bar through style property.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <div style={{ height: 100, display: 'flex' }}>
        <Progress percent={10} direction='vertical'/>
        <Progress percent={25} direction='vertical' />
        <Progress percent={50} direction='vertical' />
        <Progress percent={80} direction='vertical' size='large' />
        <Progress percent={80} direction='vertical' style={{ width: '8px' }}/>
    </div>
)

Circular progress bar

Set type tocircle, the progress bar will be displayed in a ring shape. The default size of the progress bar is 72 x 72

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <div>
        <Progress percent={10} type='circle' style={{ margin: 5 }} />
        <Progress percent={25} type='circle' style={{ margin: 5 }} />
        <Progress percent={50} type='circle' style={{ margin: 5 }} />
        <Progress percent={80} type='circle' style={{ margin: 5 }} />
    </div>
)

You can modify it's width to control the size of the circular progress bar.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <React.Fragment>
        <div>
            <Progress percent={100} type='circle' width={100} style={{ margin: 5 }} />
        </div>
        <div>
            <Progress percent={100} type='circle' width={100} style={{ margin: 5 }} stroke='#f93920' />
        </div>
    </React.Fragment>
)

Small circular progress bar

Small progress bar default size is 24 x 24.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <React.Fragment>
        <Progress percent={10} type='circle' size='small' style={{ margin: 5 }} />
        <Progress percent={25} type='circle' size='small' style={{ margin: 5 }} />
        <Progress percent={50} type='circle' size='small' style={{ margin: 5 }} />
        <Progress percent={80} type='circle' size='small' style={{ margin: 5 }} />
    </React.Fragment>
)

Dynamic change percent

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';

() => {
    const [percent, setPercent] = useState(40);
    return (
        <>
            <div>
                <Progress percent={percent} showInfo/>
                <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setPercent(percent - 10)}} disabled={percent === 0} />
                <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setPercent(percent + 10)}} disabled={percent >=100 } />
            </div>

        </>
    )
}

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';

() => {
    const [cirPerc, setCirPerc] = useState(40);
    return (
        <div>
            <div><Progress percent={cirPerc} type='circle'/></div>
            <Button icon={<IconChevronLeft />} theme="light" onClick={()=> {setCirPerc(cirPerc - 10)}} disabled={cirPerc === 0}/>
            <Button icon={<IconChevronRight />} theme="light" onClick={()=> {setCirPerc(cirPerc + 10)}} disabled={cirPerc >=100 }/>
        </div>
    )
}

Custom central text content

You can customize the central text by passing format function, and the argument of the format is the current percentage
If you don't need central text content, you can set showInfo to false or return an empty string directly in format

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <React.Fragment>
        <Progress percent={75} showInfo type='circle' format={(per) => per + 'Days'} style={{ margin:10 }}/>
        <Progress percent={100} showInfo type='circle' format={(per) => 'Done'} style={{ margin:10 }}/>
        <Progress percent={50} showInfo type='circle' showInfo={false} style={{ margin:10 }}/>
    </React.Fragment>
)

Round / square edges

With the strokeLinecap property, you can control the edge shape of the ring progress bar.

import React from 'react';
import { Progress } from '@douyinfe/semi-ui';

() => (
    <React.Fragment>
        <Progress percent={50} strokeLinecap='round' type='circle' style={{ margin: 10 }} />
        <Progress percent={50} strokeLinecap='square' type='circle' style={{ margin:10 }} />
    </React.Fragment>
)

API Reference

PROPERTIES	Instructions	Type	Default
className	style class name	string
direction	The direction of the bar progress bar horizontal, vertical	string	'horizontal'
format	Formatting function, the input parameter is the current percentage, the result of return will be directly rendered in the center of the circular progress bar	(percent: number) => ReactNode	(percent) => percent +'%'
orbitStroke	Progress bar track fill color provided after v1.0.0	string	'var(--semi-color-fill-0)'
percent	percentage of progress	number
showInfo	Whether to display the middle text in the circular progress bar, and whether to display the text on the right side of the bar-shaped progress bar	boolean	false
size	size, optional default, small (only type=circle is effective), large (only type=line is effective)	string	'default'
stroke	Fill color of progress bar	string	'var(--semi-color-success)'
strokeLinecap	round corner round/square corner square (only effective in type='circle' mode)	string	'round'
strokeWidth	When type is line, this property controls the height of the progress bar; when type is circle, this property controls the width of the progress bar	number	4
style	style	CSSProperties
type	type, optional line, circle	string	'line'
width	Width of circular progress bar	number	72 when size='default', 24 for 'small'

Design Tokens