Does every page need one?

No. Short pages already show their end.

A thin bar at the top is the default for reading.

Should it show a percent?

Only if the number helps. 62 percent on an article is noise. Step 2 of 4 is a label.

What about a sticky header?

If the header hides on the way down, the bar has to live somewhere that stays.

What does reduced motion do?

It can stay as a still marker. What you drop is the fill chasing the scroll.

Progress

A progress cue shows how far through a page, a section or a short task someone has moved, usually as a thin bar, a line or a ring that fills as they go.

ScrollBuild difficulty: EasyScrollTrigger

Also called Scroll progress, Reading progress, Page progress bar, Scroll indicator, Progress line.

Here it is working.

Chapter one

Scroll the box. The line at the top is how far you have come.

For designers

You reach for this on a long article, a case study or a short flow with a few named steps. People lose the top of the page. A thin fill at the edge tells them there is an end, without asking them to look at a scrollbar they may not have. Keep it quiet. One line across the top is a signal. If the job is you are on step 3 of 4, write the words. A bar that fills by scroll position cannot name the steps.

Use this when

The page is long enough that the end is not obvious from the first screen.
The fill maps to one journey: this article, this section, this short flow.
You can keep it at the edge, out of the reading column.
Reduced motion can show a still marker, or nothing.

Reach for something else when

The reader needs named steps they can jump between. Use Step-by-step timeline, or just a list.
The figure itself is the point. Use Counter.
You wanted a looping strip of logos. Use Infinite marquee.
You wanted the page itself to change as they move. Use Background colour or Parallax.
The header should get out of the way. Use Hide header.

How to build it

Put the cue at the edge of the viewport, usually the top or the left. Measure how far the document, or one pinned section, has moved. Drive a scale on X, a stroke, or a clip from 0 to 1. ScrollTrigger exposes that progress. If the cue is for a section, bind it to that section. A decorative bar can be hidden from assistive tech. A 3 of 4 label cannot. On reduced motion, freeze the fill or drop the cue.

Official GSAP

ScrollTrigger.

gsap.fromTo('.bar', { scaleX: 0 }, {
  scaleX: 1, ease: 'none',
  scrollTrigger: { start: 'top top', end: 'bottom bottom', scrub: 0.3 },
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does every page need one?: No. Short pages already show their end.
Bar, line or ring?: A thin bar at the top is the default for reading.
Should it show a percent?: Only if the number helps. 62 percent on an article is noise. Step 2 of 4 is a label.
What about a sticky header?: If the header hides on the way down, the bar has to live somewhere that stays.
What does reduced motion do?: It can stay as a still marker. What you drop is the fill chasing the scroll.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Hide header