Progress Bar

A progress bar can be used to indicate to a user the progress of an operation.

Getting started:

Add an Action Form module to your page, go to Manage Form, and select Start from Scratch.

Add a Progress Bar field

Set the preferred Display, Animation and Values

Add a Slider field(under Multiple Choice)

Set the preferred Values

Add the Slider's fieldID token on the Progress Bar's Bind Expressions, in the Value field

Settings Reference:

• Shape

  • Select a form. Can be Line, Circle or Semicircle

• Display Text

  • Choose an option for text. Can be Percentage or Value

• Min Value

  • Minimum of the range where the percentage will be calculated. Can be negative. Default 0. (eg. 20).

• Max Value

  • Maximum of the range where the percentage will be calculated. Default 100. (eg. 80).

• Stroke color

  • Enter Color (eg. red #00ff00 rgb(0,0,255)).

• Trail color

  • Enter Color (eg. red #00ff00 rgb(0,0,255)).

• Stroke Width

  • Thickness of the stroke (eg. 2).

• Trail Width

  • Thickness of the trail (eg. 1).

• Animation

  • Type of animation on value change. It can be: easInOut or Bounce

• Animation Duration

  • Time in milliseconds. Disable with -1. (eg. 1400)

• Change color on value

  • Set the color of the progress bar once it reaches the specified value. Multiple steps can be added. (eg 20(Value) - red(Color))