1---
2title: Show Progress Toward Completion
3impact: HIGH
4tags: ux, goal-gradient, progress, motivation
5---
6 
7## Show Progress Toward Completion
8 
9People accelerate behavior as they approach a goal. Show how close they are to finishing.
10 
11**Incorrect (no sense of progress):**
12 
13```tsx
14function Onboarding({ step }) {
15  return <OnboardingStep step={step} />;
16}
17```
18 
19**Correct (progress visible):**
20 
21```tsx
22function Onboarding({ step, totalSteps }) {
23  return (
24    <div>
25      <ProgressBar value={step} max={totalSteps} />
26      <span>Step {step} of {totalSteps}</span>
27      <OnboardingStep step={step} />
28    </div>
29  );
30}
31```
32 
33Reference: [Goal-Gradient Effect](https://lawsofux.com/goal-gradient-effect/)
34