Customizing the progress bar

The progress bar is displayed to show how far along a user completed the form. It is a user-friendly component that shows the activity on the form.

Once you have created a multi-page form, it will appear on top of each page.

The completion progress can be displayed as:

• steps
• percentage
• page numbers
• hidden

To change that, click on the progress bar in the main view of your form. The progress bar available options will be listed in the left-side panel.

Navigate to each page to change its title.

With the help of custom CSS codes, you can change its design. Learn in this article how to add custom CSS on your form.

Below we have listed a few examples.

1. Changing the bottom line color.

#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current] {
    border-bottom-color:#ff0000;
}

2. Changing the background color.

#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current] {

background-color: #a4d7e8;
}

3. Changing the text color.

#form > div[data-role=page] > [data-role=page-header] > div[data-role=pagination][data-type=steps] > div[data-role=step][data-is-current]
 {
color:#a4d7e8;
 }

Related articles:

• Multi-Page Forms
• How to remove pages