View on Git
ProgressBar
Shows static progress of a course or education program
Example
<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