Element: #323 Reading progress bar (motion/scroll) What it shows: A 4px bar stuck to the top of an article fills from left to right as it is read, with a percentage readout, tied directly to scroll position. When to use: Long articles, docs and legal pages where the reader wants to know how far they are. Spec: - `MotionStage` from `@codeatlasdev/ui` with `loop={5200}`: autoplay scrolls the article, a wheel or touch scroll takes over - `.doc__bar` is `position: sticky;` with `block-size: 4px;` and holds a fill scaled with `transform: scaleX(var(--p));` from `transform-origin: left center;` - Native: `animation-timeline: scroll(nearest block)` with `@keyframes fill` from `scaleX(0)` to `scaleX(1)`, inside `@supports (animation-timeline: scroll())` - Fallback and readout: a `scroll` listener computes `el.scrollTop / max` (`max` is `el.scrollHeight - el.clientHeight`); the percentage is `Math.round(p * 100)` - Autoplay reads the article in `3600` ms, linear like a steady reader - Under reduced motion the bar is full and the readout shows 100% Motion: - transform: scaleX: animation-timeline: scroll(nearest block) linear Names: Reading progress bar | Scroll progress | Barra de progresso de leitura | Barre de progression de lecture Tags: motion, scroll, progress, reading, article, scroll-driven Needs: @codeatlasdev/ui@4.6.0 Components: MotionStage Live demo: https://ui.codeatlas.com.br/docs/motion/scroll#reading-progress-bar {#snippet children(m)}

Engineering · 6 min read {m.reduced ? 100 : pct}%

How we cut checkout time in half

We measured every step of the flow before touching a pixel. Address entry alone took 41 seconds on a phone.

The first change was removing the account wall: guests now pay in three taps, and the median dropped to 58 seconds.

Next we prefilled the postcode from the card, replaced the select lists with native pickers and moved totals above the fold.

Failed payments were the last big leak. A retry sheet with the previous method preselected recovered 23% of them.

Together, the changes took the median from 2m 04s to 58s, and conversion rose 11 points in four weeks.

{/snippet}