Progress initialize
Tornado Forms provide a method called progress that you can use to create and activate the functionality of Tornado UI Progress Bar Component like this Tornado.forms.progress(selector, options);
//======> Import Forms Methods <=======//
import Forms from './Base/Forms';
//====> Activate Progress Bar <====//
Forms.progress('.progress-bar');
//====> or From Global Methods <====//
Tornado.forms.progress('.progress-bar');
Progress Markup
progress can be created with any element with class name progress-bar then add a data attribute for the progress data-value=”50%” and you can add a title to it by using the data title attribute data-title=”Title” and you can add class name circle for the circle mode.
<!-- Progress Component -->
<div class="progress-bar" data-value="49%" data-title="Progress Bar"></div>
Progress Options
the Progress method have multiple options for changing the color of the progress and the type if its bar or circle look at the code below to know each option and what is it for.
//====> Method Options <====//
Tornado.forms.progress('.progress-bar', {
type : 'bar' //===> the Type of the Progress [bar || circle || radial]
color : '#000' //===> the color of the Progress
background : '#ebebeb', //===> Progress background color
});
Progress Circle
an example of the circle progress mode that you can activate from JS option type : ‘circle’ or you can add class name circle to the progresss-bar element.
<!-- Progress Component -->
<div class="progress-bar circle" data-value="49%" data-title="Circle Progress"></div>
Progress Radial
an example of the radial progress mode that you can activate from JS option type : ‘radial’ or you can add class name radial to the progresss-bar element.
<!-- Progress Component -->
<div class="progress-bar radial" data-value="49%" data-title="Circle Progress"></div>
Utilities
Class/Attribute Name | Description |
---|---|
primary | Coloring Progress Bar with The Primary Theme Color. |
secondary | Coloring Progress Bar with The Secondary Theme Color. |
success | Coloring Progress Bar with The Success Theme Color. |
danger | Coloring Progress Bar with The Danger/Error Theme Color. |
warning | Coloring Progress Bar with The Warning Theme Color. |
info | Coloring Progress Bar with The Information Theme Color. |
data-value | The Progress Value Attribute. |
data-title | The Progress Title Showing Above The Progress Bar. |