Form | Progress Components
Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.
Sass Customize
in order to edit the Progress Components you can use the css class's to overide the theme or you can edit it with sass Tornado Folder/SCSS/forms/_progress.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.
Standard Progress Bars
in order to use the progress bar simply create an html element and name it progress-bar then add a data attribute for the value data-value="50%" and you can add a title to it by using the data title attribute data-title="Title" and for the colors theme you can use the colors class like primary,secondary,primary..etc.
<!-- Progress Component -->
<div class="progress-bar" data-value="49%" data-title="Default Progress Bar"></div>
<!-- Progress Component -->
<div class="progress-bar primary" data-value="60%" data-title="Primary Progress Bar"></div>
<!-- Progress Component -->
<div class="progress-bar success" data-value="70%" data-title="Success Progress Bar"></div>
Utilities
| Class/Attribute Name | Element | Description |
|---|---|---|
| primary | Progress Bar | Coloring Progress Bar with The Primary Theme Color. |
| secondary | Progress Bar | Coloring Progress Bar with The Secondary Theme Color. |
| success | Progress Bar | Coloring Progress Bar with The Success Theme Color. |
| danger | Progress Bar | Coloring Progress Bar with The Danger/Error Theme Color. |
| warning | Progress Bar | Coloring Progress Bar with The Warning Theme Color. |
| info | Progress Bar | Coloring Progress Bar with The Information Theme Color. |
| data-value | Progress Bar | The Progress Value Attribute. |
| data-title | Progress Bar | The Progress Title Showing Above The Progress Bar. |