1
0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00

fulfilled progress docs

This commit is contained in:
Dawid Harat
2019-12-08 19:28:02 +01:00
parent e3d7f0b4e0
commit be93b5b7cb
+12 -4
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 Bootstraps typical naming structure, you can create a standard progress, or scale it up to different sizes based on whats 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 %}
@@ -34,11 +40,13 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element.
{% example html %}
<progress class="progress progress-sm" value="15" max="100" />
<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 %}