Sequential Progress

By default, the ReadNinja bar updates continuously as the reader scrolls — every few pixels of scroll, the bar grows. Sequential progress replaces that behaviour with a stepped bar: progress jumps in discrete chunks instead of sliding smoothly.

Options

Step size is the granularity of each jump. A 10 % step means the bar moves through 10 discrete states (10 %, 20 %, 30 %… 100 %) across the entire article.

Animation duration controls how long each jump takes. 200 ms feels snappy, 600 ms feels deliberate. 400 ms is the default middle-ground.

What it looks like

With the default step size of 10 %, the bar jumps from 0 % to 10 % to 20 %… instead of updating on every scroll event. Between two milestones, the bar stays frozen at the last reached percentage. When the reader crosses the next milestone, the bar animates forward by exactly one step.

The perceived effect is closer to a progress checklist than a scrollbar — each jump feels like a small reward, which is why it works especially well on long-form content.

When to use it

• Long-form articles — 3,000+ word pieces where a continuous bar can feel like it's barely moving.
• Tutorials and guides — readers naturally pause to absorb each section, making the milestone feel meaningful.
• Progress-as-motivation content — any article where you want the reader to feel they're making visible steps forward, rather than crawling along a continuous line.

On very short posts (under 500 words), sequential progress is usually too jumpy to feel good — stick with the default continuous mode there.