Show Progress Toward Completion

People accelerate behavior as they approach a goal. Show how close they are to finishing.

Incorrect (no sense of progress):

function Onboarding({ step }) {
  return <OnboardingStep step={step} />;
}

Correct (progress visible):

function Onboarding({ step, totalSteps }) {
  return (
    <div>
      <ProgressBar value={step} max={totalSteps} />
      <span>Step {step} of {totalSteps}</span>
      <OnboardingStep step={step} />
    </div>
  );
}

Reference: Goal-Gradient Effect