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