create a progress-bar in the form

I was trying to create a progress bar in my form. The progress bar is supposed to be updated each time when I complete different fields so that the progress bar will be completed when all the fields are filled.

I was pretending that there will be a component to drag and drop. But its not there in the component section.

Can I get a way out to create a progress bar in the the form?

Solution 1:

Its easy to add a progress bar to the form

What I have done here is just added some Html content instead of the title of the compnent.

You can use any html progress bar componets to achieve this I used a sample code from ww3Schools and the refernce is given sample code

have a try on formsflow.ai and form.io

Solution 2:

You can also use the html component which is given in the components section to add progress bar element. insert the ui code and connect the javascript values to update the progress bar dynamically.

Add your html code here

The saved result would be like the following image.

Thanks..!