Percentage Progress Bar
To help respondents keep track of answered and unanswered questions, your survey can display a progress bar that indicates a percentage of survey completion. Follow the instructions below to implement the percentage progress bar in your application:
Create a custom component that renders the progress bar.
You can implement the progress bar based on a simple
<div>element. Fill this
<div>with color depending on
Display a percentage value and a title.
A percentage value is already stored in the
progressValueproperty. To store the title, you need to create a custom property—
addPropertymethod to add the property to the survey. Then, specify the property value in the survey JSON schema.
Register the custom component so that it can be accessed by name.
In React, register the component in
ReactElementFactoryas shown in the
In Angular, register the component in
AngularComponentFactoryas shown in the
In Vue and Knockout, use techniques native to these libraries:
Add the progress bar to the survey layout.
addLayoutElementmethod. It accepts an object whose properties specify the element's
containerthat determines the element's location, a
componentthat renders the element, and
datato pass as component props. Refer to the method description for more information on these properties.