Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/progressbar.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# ProgressBar
Visualizes progress toward a maximum value.
```html
<noora-progress-bar value="75" max="100" title="Upload progress"></noora-progress-bar>
```
## Attributes
| 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. |
## Slots
| Slot | Description |
| --- | --- |
| `description` | Supporting content below the bar. |
## Styling parts
| Part | Description |
| --- | --- |
| `progress` | The progress container. |
| `track` | The complete track. |
| `value` | The filled track. |
## Basic progress
Show progress with or without a title.
```html
<noora-progress-bar value="75" max="100"></noora-progress-bar>
<noora-progress-bar value="150" max="200" title="Storage Used:"></noora-progress-bar>
```
## Progress levels
Compare empty, quarter, half, three-quarter, and complete states.
```html
<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>
```
## Different scales
Use any numeric range that suits the measured quantity.
```html
<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>
```
## Edge cases
Show overflowing, very small, and long-title progress values.
```html
<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>
```