mirror of
https://github.com/tabler/tabler.git
synced 2026-08-31 22:31:28 +04:00
131 lines
8.0 KiB
Plaintext
131 lines
8.0 KiB
Plaintext
---
|
||
title: Progress bar
|
||
summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
|
||
description: Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.
|
||
related: [/ui/components/progress-step, /ui/components/spinner]
|
||
---
|
||
import Example from '@components/Example.astro';
|
||
import ProgressBg from '@ui/ProgressBg.astro';
|
||
import CodeDocs from '@components/CodeDocs.astro';
|
||
|
||
## Default markup
|
||
|
||
To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
|
||
|
||
<Example>
|
||
<div class="progress"> <div class="progress-bar" style="width: 38%"></div> </div>
|
||
</Example>
|
||
|
||
## Progress size
|
||
|
||
Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
|
||
|
||
```html
|
||
<div class="progress progress-sm">...</div>
|
||
```
|
||
|
||
Look at the example below to see how it works:
|
||
|
||
<Example columnFullWidth>
|
||
<div class="progress progress-sm"> <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete" > <span class="visually-hidden">57% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete"> <span class="visually-hidden">45% Complete</span> </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" aria-label="63% Complete"> <span class="visually-hidden">63% Complete</span> </div> </div> <div class="progress progress-xl"> <div class="progress-bar" style="width: 82%" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-label="82% Complete"> <span class="visually-hidden">82% Complete</span> </div> </div>
|
||
</Example>
|
||
|
||
## Progress with value
|
||
|
||
If you want to display the numeric value inside the bar, place the percentage text directly in the `.progress-bar`.
|
||
|
||
<Example columnFullWidth>
|
||
<div class="progress progress-lg"> <div class="progress-bar" style="width: 10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="10% Complete"> 10% </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete"> 35% </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="90% Complete"> 90% </div> </div>
|
||
</Example>
|
||
|
||
## Indeterminate progress
|
||
|
||
You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||
|
||
<Example>
|
||
<div class="progress progress-sm"> <div class="progress-bar progress-bar-indeterminate"></div> </div>
|
||
</Example>
|
||
|
||
## Native progress element
|
||
|
||
You can also use the native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:
|
||
|
||
<Example>
|
||
<progress class="progress progress-sm" value="15" max="100" />
|
||
</Example>
|
||
|
||
## Progress color
|
||
|
||
You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
|
||
|
||
See the [full list of available colors](/ui/base/colors) for more details.
|
||
|
||
<Example columnFullWidth>
|
||
<div class="progress"> <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete" > <span class="visually-hidden">24% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete" > <span class="visually-hidden">45% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete" > <span class="visually-hidden">64% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete" > <span class="visually-hidden">38% Complete</span> </div> </div>
|
||
</Example>
|
||
|
||
## Multiple progress bars
|
||
|
||
You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
|
||
|
||
```html
|
||
<div class="progress-stacked">
|
||
<div class="progress">...</div>
|
||
</div>
|
||
```
|
||
|
||
This is how it looks:
|
||
|
||
<Example vertical column>
|
||
<div class="progress-stacked"> <div class="progress" style="width: 15%"> <div class="progress-bar"></div> </div> <div class="progress" style="width: 30%"> <div class="progress-bar bg-success"></div> </div> <div class="progress" style="width: 20%"> <div class="progress-bar bg-info"></div> </div> </div>
|
||
</Example>
|
||
|
||
## Striped progress
|
||
|
||
You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
|
||
|
||
<Example>
|
||
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width: 60%"></div> </div>
|
||
</Example>
|
||
|
||
## Animated progress
|
||
|
||
To animate stripes, add the `.progress-bar-animated` class to a striped progress bar.
|
||
|
||
<Example columnFullWidth>
|
||
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div> </div>
|
||
</Example>
|
||
|
||
## Separated progress
|
||
|
||
Use `.progress-separated` to make stacked segments easier to read when values are close to each other.
|
||
|
||
<Example vertical column>
|
||
<div class="progress-stacked"> <div class="progress progress-separated" style="width: 10%"> <div class="progress-bar bg-blue"></div> </div> <div class="progress progress-separated" style="width: 20%"> <div class="progress-bar bg-red"></div> </div> <div class="progress progress-separated" style="width: 30%"> <div class="progress-bar bg-green"></div> </div> <div class="progress progress-separated" style="width: 40%"> <div class="progress-bar bg-yellow"></div> </div> </div>
|
||
</Example>
|
||
|
||
## Progress background
|
||
|
||
By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the
|
||
page, the progress bar could gradually fill up, creating a sense of momentum and progress.
|
||
|
||
Thanks to this you can create a nice looking statistics section:
|
||
|
||
<Example columnFullWidth>
|
||
<ProgressBg value="65" text="Poland" showValue true /> <ProgressBg value="35" text="Germany" showValue true /> <ProgressBg value="28" text="United States" showValue true /> <ProgressBg value="20" text="United Kingdom" showValue true /> <ProgressBg value="15" text="France" showValue true />
|
||
</Example>
|
||
|
||
## Progress background colors
|
||
|
||
You can combine progress background with contextual light colors to better separate categories.
|
||
|
||
<Example columnFullWidth>
|
||
<ProgressBg value="75" text="Success" color="success-lt" showValue true /> <ProgressBg value="60" text="Warning" color="warning-lt" showValue true /> <ProgressBg value="40" text="Danger" color="danger-lt" showValue true /> <ProgressBg value="90" text="Info" color="info-lt" showValue true />
|
||
</Example>
|
||
|
||
## SCSS variables
|
||
|
||
Use these SCSS variables to customize progress bars. The default values are:
|
||
|
||
<CodeDocs name="progress-variables" file="core/scss/_variables.scss" />
|