Progress Indicators

A progress indicator, or progress bar, is a graphical element that visualizes the status of a particular task or process. Progress indicators provide visual cues that help respondents understand how far along they have advanced in your survey. SurveyJS Form Library ships with a progress bar that can show different types of progress information or allow users to switch survey pages.

A progress bar can be displayed at different positions within a survey. Use the showProgressBar property to specify the desired position. This property accepts the following values:

• "off" (default) - Hides the progress bar.
• "aboveHeader" - Displays the progress bar above the survey header.
• "belowHeader" - Displays the progress bar below the survey header.
• "bottom" - Displays the progress bar below survey content.
• "topBottom" - Displays the progress bar above and below survey content.
• "auto" - Automatically selects between "aboveHeader" and "belowHeader".

In this demo, you can use the Show progress bar drop-down menu to switch between the positions.

You can also specify the information the progress bar displays: the number of completed pages, answered questions, answered required questions, or correct answers. To do this, set the progressBarType property to one of the following values:

• "pages" (default)
  Indicates the number of completed pages and serves as a navigation element that respondents can use to jump between pages. You can also enable the progressBarShowPageNumbers and progressBarShowPageTitles properties if you want to display page numbers and titles in the progress bar. Use a page's navigationTitle property to specify the page title.
• "questions"
  Indicates The number of answered questions.
• "requiredQuestions"
  Indicates the number of answered required questions.
• "correctQuestions"
  Indicates the number of correct questions in a quiz.

This demo allows you to switch between the "pages" and "questions" progress bar types at runtime using the Progress bar type drop-down menu.