noora/docs/components/progressbar.md
Visualizes progress toward a maximum value.
<noora-progress-bar value="75" max="100" title="Upload progress"></noora-progress-bar>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
value | number | 0 | Sets the current value. |
max | number | 100 | Sets the maximum value. |
title | string | None | Sets the optional title. |
| Slot | Description |
|---|---|
description | Supporting content below the bar. |
| Part | Description |
|---|---|
progress | The progress container. |
track | The complete track. |
value | The filled track. |
Show progress with or without a title.
<noora-progress-bar value="75" max="100"></noora-progress-bar>
<noora-progress-bar value="150" max="200" title="Storage Used:"></noora-progress-bar>
Compare empty, quarter, half, three-quarter, and complete states.
<noora-progress-bar value="0" max="100" title="Not started"></noora-progress-bar>
<noora-progress-bar value="25" max="100" title="25% Complete"></noora-progress-bar>
<noora-progress-bar value="50" max="100" title="Halfway there"></noora-progress-bar>
<noora-progress-bar value="75" max="100" title="Almost done"></noora-progress-bar>
<noora-progress-bar value="100" max="100" title="Complete!"></noora-progress-bar>
Use any numeric range that suits the measured quantity.
<noora-progress-bar value="3" max="5" title="Steps completed:"></noora-progress-bar>
<noora-progress-bar value="750" max="1000" title="Points earned:"></noora-progress-bar>
<noora-progress-bar value="847" max="1024" title="Download progress (MB):"></noora-progress-bar>
Show overflowing, very small, and long-title progress values.
<noora-progress-bar value="120" max="100" title="Exceeded goal:"></noora-progress-bar>
<noora-progress-bar value="1" max="1000" title="Just started:"></noora-progress-bar>
<noora-progress-bar value="42" max="100" title="Very Long Progress Bar Title That Might Wrap:"></noora-progress-bar>