Progress - Semi Design Next

Demos

How to import

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

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
Use aria-label Property to explain the specific role
If the preset size is not satisfied, You can pass height to customize the height of the progress bar through style property.

Code

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

export default function ProgressDemo() {
    return (
        <div style={{ width: '200px' }}>
            <Progress percent={10} stroke="var(--semi-color-warning)" aria-label="disk usage" />
            <br />
            <Progress percent={25} stroke="var(--semi-color-danger)" aria-label="disk usage" />
            <br />
            <Progress percent={50} aria-label="disk usage" />
            <br />
            <Progress percent={80} aria-label="download progress" />
            <br />
            <Progress percent={80} size="large" aria-label="disk usage" />
            <br />
            <Progress percent={80} style={{ height: '8px' }} aria-label="disk usage" />
        </div>
    );
}

Indeterminate progress bar

Set indeterminate when progress cannot be calculated. It supports both line and circle progress bars. When enabled, percent no longer controls the progress length and showInfo text is hidden.

Code

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

export default function ProgressDemo() {
    return (
        <div style={{ width: '240px' }}>
            <Progress indeterminate aria-label="正在加载" />
            <br />
            <Progress indeterminate size="large" aria-label="正在加载" />
            <div style={{ display: 'flex', 'align-items': 'center', gap: '16px', 'margin-top': '20px' }}>
                <Progress indeterminate type="circle" aria-label="正在加载" />
                <Progress indeterminate type="circle" size="small" aria-label="正在加载" />
            </div>
        </div>
    );
}

Show percentage text

You can control whether to show percentage number through the showInfo property, and format the percentage text through the format property. The JSX returned by the function replaces the default text.

10%

25%

50%

500‰

Code

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

export default function ProgressDemo() {
    return (
        <div style={{ width: '200px' }}>
            <Progress percent={10} stroke="var(--semi-color-warning)" showInfo aria-label="disk usage" />
            <br />
            <Progress percent={25} stroke="var(--semi-color-danger)" showInfo aria-label="disk usage" />
            <br />
            <Progress percent={50} showInfo aria-label="disk usage" />
            <br />
            <Progress percent={50} showInfo format={(percent) => percent * 10 + '‰'} aria-label="disk usage" />
        </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.

Code

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

export default function ProgressDemo() {
    return (
        <div style={{ height: '100px', display: 'flex' }}>
            <Progress percent={10} direction="vertical" aria-label="disk usage" />
            <Progress percent={25} direction="vertical" aria-label="disk usage" />
            <Progress percent={50} direction="vertical" aria-label="disk usage" />
            <Progress percent={80} direction="vertical" size="large" aria-label="disk usage" />
            <Progress percent={80} direction="vertical" style={{ width: '8px' }} aria-label="disk usage" />
        </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

Code

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

export default function ProgressDemo() {
    return (
        <div>
            <Progress percent={10} type="circle" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={25} type="circle" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={50} type="circle" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={80} type="circle" style={{ margin: '5px' }} aria-label="disk usage" />
        </div>
    );
}

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

Code

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

export default function ProgressDemo() {
    return (
        <>
            <div>
                <Progress percent={100} type="circle" width={100} style={{ margin: '5px' }} aria-label="disk usage" />
            </div>
            <div>
                <Progress percent={100} type="circle" width={100} style={{ margin: '5px' }} stroke="var(--semi-color-danger)" aria-label="disk usage" />
            </div>
        </>
    );
}

Small circular progress bar

Small progress bar default size is 24 x 24.

Code

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

export default function ProgressDemo() {
    return (
        <>
            <Progress percent={10} type="circle" size="small" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={25} type="circle" size="small" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={50} type="circle" size="small" style={{ margin: '5px' }} aria-label="disk usage" />
            <Progress percent={80} type="circle" size="small" style={{ margin: '5px' }} aria-label="disk usage" />
        </>
    );
}

Dynamic change percent

The number in the text animates to the new percent. When percent changes again while the animation is running, the new animation starts from the number currently shown.

40%

Code

import { createSignal } from 'solid-js';
import { IconChevronLeft, IconChevronRight } from '@fibrous/semi-icons-solid';
import { Progress, Button } from '@fibrous/semi-ui-solid';

export default function ProgressDemo() {
    const [percent, setPercent] = createSignal(40);
    return (
        <div>
            <Progress percent={percent()} showInfo aria-label="disk usage" />
            <Button aria-label="减少" icon={<IconChevronLeft />} theme="light" onClick={() => setPercent(percent() - 10)} disabled={percent() === 0} />
            <Button aria-label="增加" icon={<IconChevronRight />} theme="light" onClick={() => setPercent(percent() + 10)} disabled={percent() >= 100} />
        </div>
    );
}

Code

import { createSignal } from 'solid-js';
import { IconChevronLeft, IconChevronRight } from '@fibrous/semi-icons-solid';
import { Progress, Button } from '@fibrous/semi-ui-solid';

export default function ProgressDemo() {
    const [cirPerc, setCirPerc] = createSignal(40);
    return (
        <div>
            <div>
                <Progress percent={cirPerc()} type="circle" aria-label="disk usage" />
            </div>
            <Button aria-label="减少" icon={<IconChevronLeft />} theme="light" onClick={() => setCirPerc(cirPerc() - 10)} disabled={cirPerc() === 0} />
            <Button aria-label="增加" icon={<IconChevronRight />} theme="light" onClick={() => setCirPerc(cirPerc() + 10)} disabled={cirPerc() >= 100} />
        </div>
    );
}

Custom central text content

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

75Days

Done

Code

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

export default function ProgressDemo() {
    return (
        <>
            <Progress percent={75} showInfo type="circle" format={(per) => per + 'Days'} style={{ margin: '10px' }} aria-label="disk usage" />
            <Progress percent={100} showInfo type="circle" format={() => 'Done'} style={{ margin: '10px' }} aria-label="disk usage" />
            <Progress percent={50} type="circle" showInfo={false} style={{ margin: '10px' }} aria-label="disk usage" />
        </>
    );
}

Round / square edges

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

Code

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

export default function ProgressDemo() {
    return (
        <>
            <Progress percent={50} strokeLinecap="round" type="circle" style={{ margin: '10px' }} aria-label="disk usage" />
            <Progress percent={50} strokeLinecap="square" type="circle" style={{ margin: '10px' }} aria-label="disk usage" />
        </>
    );
}

Customise the progress bar color

The color of a specific percent can be customised by setting the stroke property

10%

Code

import { createSignal } from 'solid-js';
import { IconChevronLeft, IconChevronRight } from '@fibrous/semi-icons-solid';
import { Progress, Button } from '@fibrous/semi-ui-solid';

const strokeArr = [
    { percent: 20, color: 'red' },
    { percent: 40, color: 'orange-9' },
    { percent: 60, color: 'light-green-8' },
    { percent: 80, color: 'hsla(125, 50%, 46%, 1)' },
];

export default function ProgressDemo() {
    const [percent, setPercent] = createSignal(10);
    return (
        <>
            <div>
                <Progress percent={percent()} stroke={strokeArr} showInfo type="circle" width={100} aria-label="disk usage" />
                <Progress percent={percent()} stroke={strokeArr} showInfo style={{ margin: '20px 0 10px' }} aria-label="disk usage" />
            </div>
            <Button aria-label="Decrease" icon={<IconChevronLeft />} theme="light" onClick={() => setPercent(percent() - 10)} disabled={percent() === 0} />
            <Button aria-label="Increase" icon={<IconChevronRight />} theme="light" onClick={() => setPercent(percent() + 10)} disabled={percent() === 100} />
        </>
    );
}

Auto-completion of colour intervals

The gradient can be generated by setting the strokeGradient property to true, automatically fill the colour interval.

65%

Code

import { createEffect, createSignal, on, onCleanup } from 'solid-js';
import { IconChevronLeft, IconChevronRight } from '@fibrous/semi-icons-solid';
import { Space, Progress, Button } from '@fibrous/semi-ui-solid';

const strokeArr = [
    { percent: 0, color: 'rgb(249, 57, 32)' },
    { percent: 50, color: '#46259E' },
    { percent: 100, color: 'hsla(125, 50%, 46%, 1)' },
];

const strokeArrReverse = [
    { percent: 0, color: 'hsla(125, 50%, 46%, 1)' },
    { percent: 50, color: '#46259E' },
    { percent: 100, color: 'rgb(249, 57, 32)' },
];

export default function ProgressDemo() {
    const [percent, setPercent] = createSignal(65);
    const [percentInterval, setPercentInterval] = createSignal(0);

    // Each value schedules the next one; restarting after 100 pauses longer.
    createEffect(
        on(percentInterval, (current) => {
            const timer = setTimeout(() => setPercentInterval(current > 100 ? 0 : current + 3), current === 0 || current > 100 ? 1200 : 290 - (current % 50) * 3);
            onCleanup(() => clearTimeout(timer));
        })
    );

    return (
        <>
            <Space spacing={20}>
                <div>
                    <Progress percent={percentInterval()} stroke={strokeArr} strokeGradient showInfo type="circle" width={100} aria-label="file download speed" />
                </div>
                <div>
                    <Progress percent={percentInterval()} stroke={strokeArrReverse} strokeGradient showInfo type="circle" width={100} aria-label="file download speed" />
                </div>
            </Space>
            <div style={{ width: '100%', margin: '20px 0 10px' }}>
                <Progress percent={percent()} stroke={strokeArr} strokeGradient showInfo size="large" aria-label="file download speed" />
            </div>
            <Button aria-label="Decrease" icon={<IconChevronLeft />} theme="light" onClick={() => setPercent(percent() - 5)} disabled={percent() === 0} />
            <Button aria-label="Increase" icon={<IconChevronRight />} theme="light" onClick={() => setPercent(percent() + 5)} disabled={percent() === 100} />
        </>
    );
}

API Reference

Props

Property	Description	Type	Default
direction	Direction of the line progress bar: horizontal or vertical.	`'horizontal' \| 'vertical'`	`"horizontal"`
format	Formatting function. It receives the shown percentage (clamped to 0-100) and returns JSX rendered in the center of a circle or on the right of a bar. It runs only when the text is shown.	`Type`	`Type`
indeterminate	Whether the progress is indeterminate. When on, percent no longer controls the length, the text is hidden and aria-valuenow is omitted.	`boolean`	`false`
motion	Whether the shown number animates to the new percent. When off it jumps to the target.	`boolean`	`true`
orbitStroke	Fill color of the track.	`string`	-
percent	Progress percentage. Values outside 0-100 are clamped. Updating it to NaN throws an error.	`number`	`0`
showInfo	Whether to show the text: in the center of a circle, or on the right of a bar. A small circle (size small) never shows the text.	`boolean`	`false`
size	Size: default, small (circle only) or large (line only).	`Size`	`"default"`
stroke	Fill color. An array is a list of `{ percent, color }` intervals, where color is any CSS color or a Semi palette name.	`string \| StrokeArr`	-
strokeGradient	Whether to generate gradient colors between intervals. Requires at least one interval in stroke.	`boolean`	`false`
strokeLinecap	Line cap of the circle progress bar: round or square. Has no effect on a line progress bar.	`'round' \| 'square'`	`"round"`
strokeWidth	Stroke width of the circle progress bar.	`number`	`4`
type	Type: line or circle.	`'line' \| 'circle'`	`"line"`
width	Diameter of the circle progress bar. Defaults to 24 when size is small and 72 otherwise.	`number`	-

class, style and native attributes (id, aria-label, aria-labelledby, aria-valuetext and so on) are spread as props onto the root element (role="progressbar").

Accessibility

ARIA

Progress has a progressbar role to indicate that it is a progress bar component.
Progress will automatically set aria-valuenow as the progress percentage (percent) passed to the component to ensure that the screen reader can get the correct percentage value. When indeterminate=true, aria-valuenow is omitted because the current progress value is unknown. In addition, Progress supports incoming aria-valuetext. When you pass in, according to W3C specifications, aria-valuetext will be used and consumed by screen readers instead of aria-valuenow
Progress support aria-label, aria-labelledby
- When there is a description element about the role of Progress outside of Progress, you can explicitly specify that the id of certain elements is the label of Progress through aria-labelledby
- Otherwise, you should use aria-label to explain the specific meaning of the value represented by Progress

// good case
<p id="progressbar-label">Disk Usage</p>
<Progress aria-labelledby="progressbar-label" percent={80} />

// good case
<Progress aria-label='Percent of disk usage' percent={80} />
<Progress aria-label='Percent of file downloaded' percent={80} />

// usage of aria-valuetext
<Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/>

Content Guidelines

If the progress bar process is complicated, or there is a long waiting time, you can use the help text to explain. This lets the user know what progress is happening.

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$color-progress_default-bg	var(--semi-color-fill-0)	默认背景色
$color-progress_track_inner-bg	var(--semi-color-success)	默认进度色
$color-progress_line_text-text	var(--semi-color-text-0)	百分比文本文字颜色
$color-progress_circle-text	var(--semi-color-text-0)	环形进度百分比文字颜色
$motion-progress-transition_duration	0.3s	进度条动画时长
$motion-progress-transition_timing_function	cubic-bezier(0.62, 0.05, 0.36, 0.95)	进度条动画曲线
$height-progress_horizontal	4px	水平进度条高度
$height-progress_horizontal_large	6px	大尺寸水平进度条高度
$spacing-progress_line_text-marginLeft	$spacing-base	水平进度条百分比文本左侧外边距
$spacing-progress_vertical-marginX	$spacing-extra-tight	垂直进度条水平方向外边距
$spacing-progress_horizontal-marginY	$spacing-extra-tight	水平进度条垂直方向外边距
$spacing-progress_vertical_line_text-marginTop	$spacing-tight	垂直进度条百分比文本顶部外边距
$font-progress_line_text-fontWeight	600	百分比文本字重
$width-progress_line_text	45px	百分比文本最小宽度
$width-progress_vertical	4px	垂直进度条宽度
$width-progress_vertical_large	6px	大尺寸垂直进度条宽度
$radius-progress_track	var(--semi-border-radius-small)	背景圆角大小
$radius-progress_track_inner	var(--semi-border-radius-small)	进度条圆角大小