Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

Merge pull request #412 from tabler/dev-doc-progress

Browse Source 
docs progress fulfilled
This commit is contained in:
Paweł Kuna
2019-12-09 18:21:09 +01:00
committed by GitHub
parent 2656fd1fdb be93b5b7cb
commit 770717035a
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/progress.md
+17 -3
View File
@@ -11,20 +11,26 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
{% include ui/progress.html %}
{% endexample %}
### Small progress
### Progress size
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
{% example html %}
{% include ui/progress.html value=57 size="sm" %}
{% endexample %}
### Progress with value
### Progress without value
Remove the showed value by adding a class called `.sr-only`.
{% example html %}
{% include ui/progress.html value=75 show-value=true %}
{% include ui/progress.html value=75 show-value=false %}
{% endexample %}
### Indeterminate progress
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
{% example html %}
{% include ui/progress.html indeterminate=true size="sm" %}
{% endexample %}
@@ -36,3 +42,11 @@ You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100"/>
{% endexample %}
### Progress color
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example %}
{% include ui/progress.html size="sm" color="purple"%}
{% endexample %}