Progress Bar

Business Background

The Progress Bar option is available for the Stepper and Multi Step containers. Use this option to show the progress.

How to Video

Coming soon!

How to Guide

  1. Navigate to Titan Web Application and click the expand (+) button next to the settings icon. A list of elements will show.
  2. Select the Container option from the list.
  3. Click-and-drag the Stepper container option to the canvas.
  4. Click the Stepper container settings Gear icon. The Stepper Settings screen opens.
  5. Select the Interactivity option.
  6. Click the Progress Bar checkbox and click the Gear icon. The Configure Progress Bar screen opens.
Progress bar checkbox and Gear icon
Progress bar checkbox and Gear icon
  1. Use the drop-down list to select the position of the progress bar:
    • Top left
    • Top center
    • Top right
    • Bottom left
    • Bottom center
    • Botton right
  2. Select a radio button to set the progress display:
    • Percentage: The progress is added as a percentage of the total steps.
    • Numeric: The progress bar is added as a number of the total steps.
Configure Progress Bar screen
Configure Progress Bar screen

A progress bar is added to the stepper.

Example
Example

Hidden Title

Need more help?