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:

1. 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 SurveyModel's progressValue property value.

2. Display a percentage value and a title.
   A percentage value is already stored in the progressValue property. To store the title, you need to create a custom property—progressTitle. Call Serializer's addProperty method to add the property to the survey. Then, specify the property value in the survey JSON schema.

3. Register the custom component so that it can be accessed by name.
   In HTML/CSS/JavaScript projects, register the component in ReactElementFactory as shown in the index.js file.
   In React, register the component in ReactElementFactory as shown in the SurveyComponent.jsx file.
   In Angular, register the component in AngularComponentFactory as shown in the progressbar-percentage.component.ts file.
   In Vue and Knockout, use techniques native to these libraries:

   • Component Registration in Vue 2
   • Component Registration in Vue 3
   • Component Registration in Knockout

4. Add the progress bar to the survey layout.
   Call the addLayoutElement method. It accepts an object whose properties specify the element's id, a container that determines the element's location, a component that renders the element, and data to pass as component props. Refer to the method description for more information on these properties.