The ProgressBar plugin creates a progress bar and/or text indicator that updates as users navigate through the survey pages.

​
Basic Usage

const progressBarPlugin = new ProgressBar({
    maxPages: 5,
    includeProgressText: true,
    includeProgressBar: true,
    progressAsPercentage: true
});

survey.addPlugin(progressBarPlugin);

​
Parameters

​
maxPages
number
required

The total number of pages in the survey.

​
currentPage
number
default: "-1"

The initial current page (usually left at -1 for automatic handling).

​
includeProgressText
boolean
default: "true"

Whether to include a text representation of progress.

​
includeProgressBar
boolean
default: "true"

Whether to include a visual progress bar.

​
progressAsPercentage
boolean
default: "true"

Whether to display progress as a percentage (true) or as “Page X of Y” (false).

​
styles
object

Custom styles to apply to the progress bar. Available keys are:

  • root
  • container
  • bar
  • text

​
Styling

The ProgressBar plugin uses the following default styles:

{
    root: {
        marginBottom: '30px',
        display: 'flex',
        alignItems: 'center',
        gap: '15px',
    },
    container: {
        flex: '1',
        backgroundColor: '#f0f0f0',
        borderRadius: '5px',
        overflow: 'hidden',
        height: '18px',
    },
    bar: {
        width: '0',
        height: '100%',
        backgroundColor: '#4CAF50',
        transition: 'width 0.3s ease-in-out',
    },
    text: {
        textAlign: 'right',
        padding: '5px 0',
        fontSize: '14px',
    }
}

​
Methods

The ProgressBar plugin inherits methods from the base Plugin class and implements some specific methods:

​
updateProgress
function

Update both the progress bar and progress text.

​
updateProgressBar
function

Update only the visual progress bar.

​
updateProgressText
function

Update only the progress text.

​
removeProgressBar
function

Remove the progress bar from the DOM.

​
Lifecycle Hooks

The ProgressBar plugin uses the following lifecycle hooks:

​
initialize
function

Set up the progress bar in the DOM when the plugin is initialized.

​
beforePageRender
function

Update the progress when a new page is about to be rendered.

​
beforeSurveyFinish
function

Set the progress to 100% when the survey is about to finish.

​
destroy
function

Remove the progress bar from the DOM when the plugin is destroyed.

​
Example

Here’s an example of how to create a customized progress bar:

const customProgressBar = new ProgressBar({
    maxPages: 10,
    includeProgressText: true,
    includeProgressBar: true,
    progressAsPercentage: false,
    styles: {
        root: { 
            marginBottom: '20px',
            backgroundColor: '#f0f8ff',
            padding: '10px',
            borderRadius: '8px',
        },
        container: {
            height: '10px',
            backgroundColor: '#e0e0e0',
        },
        bar: {
            backgroundColor: '#3498db',
            transition: 'width 0.5s ease-in-out',
        },
        text: {
            fontSize: '16px',
            fontWeight: 'bold',
            color: '#2c3e50',
        }
    }
});

survey.addPlugin(customProgressBar);
Page HTMLStyling