Progress Bar

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.


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


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

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.


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
Was this article helpful?
0 out of 0 found this helpful