Tornado UI | » Progress Components

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.