Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-14 23:32:25 +04:00
Code Issues Projects Releases Wiki Activity

New docs (#1492)

Browse Source
This commit is contained in:
Paweł Kuna
2023-02-27 01:21:44 +01:00
committed by GitHub
parent adbf5d887c
commit d162b06c4c
110 changed files with 10504 additions and 3382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/progress.mdx
+92
View File
@@ -0,0 +1,92 @@
---
title: Progress bars
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
bootstrapLink: components/progress
---
## 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.
```html example columns={1} centered
<div class="progress">
<div class="progress-bar" style="width: 38%"></div>
</div>
```
```html
<div class="progress">
<div class="progress-bar" 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>
```
## 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 code example columns={1} centered
<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>
```
## Progress without value
Remove the displayed value by adding the `.visually-hidden` class.
```html code example columns={1} centered
<div class="progress">
<div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
<span class="visually-hidden">75% Complete</span>
</div>
</div>
```
## Indeterminate progress
You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
```html code example columns={1} centered
<div class="progress progress-sm">
<div class="progress-bar progress-bar-indeterminate"></div>
</div>
```
## Native progress element
You can also use native HTML5 `<progress>` element.
```html code example columns={1} centered
<progress class="progress progress-sm" value="15" max="100" />
```
## Progress color
Customize the color of the progress bar to suit your design. Click [here](colors) to see the list of available colors.
```html code example columns={1} centered separated
<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>
```