PROGRESS COMPONENTS

Tornado Provide a Predesigned Standard Form Controls With Support for Multiple Themes Style and Many Other Useful Features.

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 progress-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 progress-bar element.

UTILITIES