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.
Max Value This option is used to set the total numeric value of the progress (not to be confused for width) for example 100.
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
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...
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
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