Stats & Numbers
Before/After Comparison Bar
Puts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
$ velocityx add before-after-barBuilt for astro.
Full docs for Before/After Comparison Bar →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Before: 4.8s. After: 1.2s. Change: −3.6s (−75%). This is an improvement.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | ||
| before | BarPoint | Yes | ||
| after | BarPoint | Yes | ||
| unit | string | No | '' | Appended after the formatted number, e.g. "s", "%", "ms". |
| prefix | string | No | '' | Prefixed before the formatted number, e.g. "$". |
| improvementIsDown | boolean | No | false | Set when a lower "after" value is the win (load time, cost, churn). |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/before-after-bar/BeforeAfterBar.astroUsing the Before/After Comparison Bar component
Install it with velocityx add before-after-bar.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astroA single large figure that counts up the moment it scrolls into view, paired with a directional change badge. No chart library, no runtime dependency — locale-safe number formatting and a permanent screen-reader value so the real number is never hidden behind the animation.
astro