Tour Progress

showProgress: true shows the position in the tour, such as "2 of 3", on the left of the popover footer. It is false by default.

Project settings

Sample content for the demo to highlight. None of these controls do anything.

const { drive } = useDriver({
  showProgress: true,
  steps: [/* ... */],
});

The total is the length of steps, so steps skipped with skipMissingElement are still counted.

Progress text

progressText is the template of the text. {{current}} is replaced with the step number and {{total}} with the number of steps. The default is {{current}} of {{total}}.

Project settings

Sample content for the demo to highlight. None of these controls do anything.

const { drive } = useDriver({
  showProgress: true,
  progressText: "Step {{current}} of {{total}}",
  steps: [/* ... */],
});

Both options are also accepted in a step's popover, to turn the progress on or change the text for that step only. To draw the progress as dots or a bar, replace it with the #progress slot of <DriverTour>, described in Custom Components.