Progress

Maintainer:
Lunory
GitHub
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

NameDescriptionTypeDefault
classNameHTML class attributestring
colorStopsSets breakpoints with themesArray<{theme: string; stop: number;}>
colorStopsValueSets the value for choosing the current stop or alternative value for colorStops. The available range is from 0 to 100.number
loadingToggles the loading statebooleanfalse
sizeSets the progress bar size. The progress bar text can only be displayed in "m" size.string"m"
stackConfiguration of composite progress bar. Not required if a value is provided.Array<Stack>
stackClassNameHTML class attribute of stackstring
textText inside the progress barReactNode
themeSets progress colorstring"default"
valueCurrent progress value. The available range is from 0 to 100. Using the stack property value is optional and is used as maxValue.number

Stack

NameDescriptionTypeDefault
classNameclass HTML attribute of the stack elementstring
colorSets the background color for the style HTML attributestring
contentStack element contentReactNode
titletitle HTML attributestring
themeSets the stack element colorstring"default"
valueCurrent progress value. The available range is from 0 to 100. Using the stack property value is optional and is used as maxValue.number
qadata-qa HTML attribute, used for testingstring

CSS API

NameDescription
--g-progress-empty-text-colorEmpty Progress text color
--g-progress-filled-text-colorFilled Progress text color
--g-progress-empty-background-colorEmpty Progress background color
--g-progress-filled-background-colorFilled Progress background color