Adding Progress Bars to Surveys

If you have a long survey that is set to span multiple pages (see "pagination" in the survey settings) you may wish to add a progress bar to each page. Because REDCap uses the Bootstrap HTML CSS framework you can add progress bars into REDCap sections using some relatively simple HTML as follows:

Here it is in pictures...


<div class="progress" style="height: 15px; width: 30%;">

<div class="progress-bar" style="width: 10%;" role="progressbar">10%</div>


<div style="font-size: 8pt; font-family: cursive;">Progress</div>


This is what it looks like in the editor:

In the above code:

Then save the source code and the field definition. In the designer it should now look like this

When you complete the survey it will look like this:

For those of you who are interested in HTML there's technical documentation at