Skip to main content Skip to docs navigation
View on Git

ProgressBar

Shows static progress of a course or education program

Example

examples

<ProgressBar size="large" label="0%" />
...
<ProgressBar color="warning" value={25} size="large" label="25%" />
...
<ProgressBar color="warning" value={50} size="large" label="50%" />
...
<ProgressBar value={75} label="75%" size="large" />
...
<ProgressBar value={100} label="100%" size="large" />
...
<ProgressBar value={0} size="small" label="0%" />
...
<ProgressBar color="warning" value={25} size="small" label="25%" />
...
<ProgressBar color="warning" value={50} size="small" label="50%" />
...
<ProgressBar value={75} size="small" label="75%" />
...
<ProgressBar value={100} size="small" label="100%" />
{% include "@seduo-design-system/progressBar.twig" with { props: {
    value: 75,
    label: "75%",
    size: "large"
}} %}
...
{% include "@seduo-design-system/progressBar.twig" with { props: {
    value: 50,
    label: "50%"
}} %}
...
{% include "@seduo-design-system/progressBar.twig" with { props: {
    value: 25,
    label: "25%",
    size: "small"
}} %}
<ProgressBar size="large" label="0%" />
...
<ProgressBar color="warning" value={25} size="large" label="25%" />
...
<ProgressBar color="warning" value={50} size="large" label="50%" />
...
<ProgressBar value={75} label="75%" size="large"/>
...
<ProgressBar value={100} label="100%" size="large"/>
...
<ProgressBar value={0} size="small" label="0%" />
...
<ProgressBar color="warning" value={25} size="small" label="25%" />
...
<ProgressBar color="warning" value={50} size="small" label="50%" />
...
<ProgressBar value={75} size="small" label="75%" />
...
<ProgressBar value={100} size="small" label="100%" />

API

Prop name Type Default Description
color primary, warning primary Color of the component
value number 0 Percentage value
label string - Text in progress bar (its only visible in large size)
size Size Dictionary medium Size of the progress bar
UNSAFE_className string - Wrapper custom classname
On this page