How do I create a progress bar for a survey queue?

How do I create a progress bar for a survey queue?

Scenario:

 You have 5 surveys in a project, and if a single survey is completed, the progress bar should imply 20% completed, then 40%, 60%, so on, and 100% when the last survey is completed.

Setup:

Go to the Survey Settings of the required instrument in your project. Use the below html snippet, Survey Progress: <progress value="20" max="100"></progress> 20% in the ‘Survey Completion’ text. Change the value in the html snippet to suit your need, and save your settings.

Result:

A progress bar will be displayed at the bottom of each survey showing how far you’ve progressed through the queue.

Note: You can use this same HTML syntax in an instrument Section Header or in the Survey Instructions at the top of each Survey. Keep in mind any branching logic used to hide fields or surveys will render the bar inaccurate as these are static insertions, and not adjusted in real time on the fly.