jsPsych/docs/markdown_docs/features/progress-bar.md

Automatic Progress Bar

jsPsych can show a progress bar at the top of the experiment page indicating the subject's overall completion progress. The progress bar is rendered outside the jsPsych display element, and it requires the jspsych.css file to be loaded on the page. As of version 4.0, the progress bar looks like this:

To show the progress bar, set the show_progress_bar option in jsPsych.init to true:

jsPsych.init({
	experiment_structure: exp,
	show_progress_bar: true
});

The progress bar updates after every top-level chunk finishes executing. This avoids distracting updates in the middle of trials that are composed of multiple plugins, or confusing updates due to looping or conditional structures that may or may not execute depending on the actions of the subject. This also allows some flexibility for the programmer; by grouping the experiment into chunks in a deliberate manner, the timing of progress bar updates can be controlled.