Progress indicator

Show step progress with the built-in counter or a fully custom slot.

Progress indicator

Pass show-progress to render a built-in "Step N of M" counter inside the tooltip. For full control, replace it with the #progress slot.

The tour will automatically start when the page loads

#progress slot props

currentStepnumber
Zero-based index of the current step.
totalStepsnumber
Total number of steps in the tour.
progressnumber
Fraction complete: (currentStep + 1) / totalSteps. Ranges from 0 to 1.
Per-step slot name
If your step defines a slot value (e.g. slot: "intro"), the slot name becomes #intro-progress instead of #progress.

HTML elements

Pass an HTMLElement directly as the step target instead of a CSS selector.

Save to localStorage

Control how and when tour progress is persisted with the save-to-local-storage prop.