Tornado Logo

Progress Components - Tornado UI v2

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 classes 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,success..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.

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.