The Progress Bar control offers a visual representation of a users progress completing a particular page. This visual display gives the user an immediate understanding of how many tabs, pages, or input fields have been completed.
Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).
This control is most commonly used as a header on web forms or tabs to indicate to the user how much progress they have made.
Behavior
Max Value This option is used to set the total numeric value of the progress (not to be confused for width) for example 100.
Appearance
Color Style 
Striped When checked gives the the Progress Bar a striped design
Active When checked the Progress Bar is animated
Radius Roundness of the Progress Bar
Width Width in px, %, em; for example: 50px, 20%, 0.4em, If no unit is specified, px is assumed
Height Height in px, %, em; for example: 50px, 20%, 0.4em, If no unit is specified, px is assumed
Example
These are the configuration option settings...
On the On Load event, the method setProgress is used to set the progress bar to 50. Having the max value set to 100, the result...
Events
With the Progress Bar control, there are 2 types of event handlers:
- On Load When the page loads
- On Click When the control is clicked
You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.
Methods
The methods listed below are available for this control. For detailed information on how to use these methods, access the JS Doc file.
- setWidth() - Set width of Progress Bar
- getWidth() - Get configured size for Progress Bar (including unit)
- setHeight() - Set height of Progress Bar
- getHeight() - Get configured size for Progress Bar (including unit)
- setColorStyle() - Set color style of Progress Bar
- setRadius() - Sets radius (roundness) of Progress Bar
- setProgress() - Set progress status
- getProgress() - Get progress status
- setMaximum() - Set the maximum value of the Progress Bar
- Author: Erick Quintanilla
- Date Created: June 8, 2015
- Date Modified: June 24, 2015
Comments