UIKit
7.16.2
• ProgressComponents
UIKit
7.16.2
Date Components
3.2.1
Navigation
3.3.9
theme
value
text
size
loading
import {Progress} from '@gravity-ui/uikit';
The Progress
component shows current operation progress. It can also be divided into sections.
§Theme
Use the theme
property to specify color of the whole progress or the composite part:
default
default
success
success
warning
warning
danger
danger
info
info
misc
misc
<Progress text="default" value={50} />
<Progress text="warning" theme="warning" value={50} />
<Progress text="info" theme="info" value={50} />
<Progress text="success" theme="success" value={50} />
<Progress text="danger" theme="danger" value={50} />
<Progress text="misc" theme="misc" value={50} />
§States
Loading
Loading
<Progress text="Loading" theme="misc" value={60} loading={true} />
§Size
To manage the size of the Progress
component, use the size
property that can take the following values: "xs"
, "s"
, and "m"
. The text
property works only with the "m"
size.
<Progress theme="success" value={60} size="xs" />
<Progress theme="warning" value={70} size="s" />
<Progress theme="danger" value={80} size="m" />
§Breakpoints
Use the colorStops
property to set breakpoints of the Progress
component.
<Progress
value={10}
colorStops={[{theme: 'danger', stop: 20}, {theme: 'warning', stop: 50}, {theme: 'success', stop: 100}]}
/>
<Progress
value={40}
colorStops={[{theme: 'danger', stop: 20}, {theme: 'warning', stop: 50}, {theme: 'success', stop: 100}]}
/>
<Progress
value={60}
colorStops={[{theme: 'danger', stop: 20}, {theme: 'warning', stop: 50}, {theme: 'success', stop: 100}]}
/>
§Stack
First
Second
Third
Fourth
Progress with custom colors
Progress with custom colors
<Progress
stack={[
{theme: 'default', content: 'First', value: 25},
{theme: 'success', content: 'Second', value: 25},
{theme: 'warning', content: 'Third', value: 25},
{theme: 'danger', content: 'Fourth', value: 25},
]}
/>
<Progress text="Progress with custom colors"
stack={[
{color: '#6e5d8c', value: 33.333333333333336},
{color: '#5b785b', value: 33.333333333333336},
{color: '#956069', value: 33.333333333333336},
]}
/>
§Properties
Name | Description | Type | Default |
---|---|---|---|
className | HTML class attribute | string | |
colorStops | Sets breakpoints with themes | Array<{theme: string; stop: number;}> | |
colorStopsValue | Sets the value for choosing the current stop or alternative value for colorStops. The available range is from 0 to 100. | number | |
loading | Toggles the loading state | boolean | false |
size | Sets the progress bar size. The progress bar text can only be displayed in "m" size. | string | "m" |
stack | Configuration of composite progress bar. Not required if a value is provided. | Array<Stack> | |
stackClassName | HTML class attribute of stack | string | |
text | Text inside the progress bar | ReactNode | |
theme | Sets progress color | string | "default" |
value | Current progress value. The available range is from 0 to 100. Using the stack property value is optional and is used as maxValue. | number |
§Stack
Name | Description | Type | Default |
---|---|---|---|
className | class HTML attribute of the stack element | string | |
color | Sets the background color for the style HTML attribute | string | |
content | Stack element content | ReactNode | |
title | title HTML attribute | string | |
theme | Sets the stack element color | string | "default" |
value | Current progress value. The available range is from 0 to 100. Using the stack property value is optional and is used as maxValue . | number | |
qa | data-qa HTML attribute, used for testing | string |
§CSS API
Name | Description |
---|---|
--g-progress-empty-text-color | Empty Progress text color |
--g-progress-filled-text-color | Filled Progress text color |
--g-progress-empty-background-color | Empty Progress background color |
--g-progress-filled-background-color | Filled Progress background color |