Duration Compare Bars

The most direct way to show "how much time this saves": lay out two to five durations as horizontal bars and let them grow together on one scale at one speed — the short bar finishes almost instantly, the long one keeps you waiting, and that wait is the point. Inputs are minutes or values with a unit (minutes / hours / days / weeks / months), displayed in the best-fitting unit automatically; the readout on the right counts from 0 to the true value as the bar grows, and a ratio badge pops in once every bar is done. When the gap is extreme (30 minutes versus 6 weeks is 2016×), the default broken scale cuts a zigzag into the middle of the long bar so the shortest one stays visible.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<DurationCompareBars/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/duration-compare-bars.en.json

Usage

import { DurationCompareBars } from "@/components/ui/duration-compare-bars";

<DurationCompareBars
  items={[
    { id: "legacy", label: "Traditional", value: 6, unit: "w" },
    { id: "ours", label: "With us", value: 30 },
  ]}
/>

// Three bars, log scale, badge shows the percentage saved
<DurationCompareBars
  scale="log"
  ratio="percent"
  items={[
    { id: "manual", label: "Manual", value: 2, unit: "d" },
    { id: "semi", label: "Semi-auto", value: 3, unit: "h" },
    { id: "auto", label: "Automated", value: 5 },
  ]}
/>

Props

DurationCompareItem

formatDuration(minutes, locale) is also exported by name, so you can reuse the same unit conversion elsewhere.

CSS variables

How it works

• Same-speed growth: each bar animates for final width × msPerPercent, capped at maxGrow; the first 80% runs at constant speed and the last stretch eases out. Long bars take longer — that sense of waiting is exactly what the component is meant to convey.
• Unit conversion: from largest to smallest, the first unit where the value is ≥ 1 and a multiple of 0.5 wins, so 6 weeks shows as "6 weeks" rather than "1.4 months", and 90 minutes shows as "1.5 hours". While counting, the unit steps up through minutes, hours and days, but never beyond the final value's unit.
• Honesty of the broken axis: broken only kicks in when linear widths would make the shortest bar narrower than minWidth. Bars before the break are drawn to scale; bars that cross the break only guarantee order and longest = 100%, so their width is no longer proportional to value — which is why the readout on the right and the aria-label always show the true value, and the zigzag and "…" at the break make the omitted span explicit. Use scale="linear" when you need strict proportions.
• Ratio and percent: ratio = longest ÷ shortest, rounded to an integer from 10× up; percent saved is floored to one decimal so 99.95% never rounds up to 100%.

Accessibility

• Bars are rendered with role="list"; each bar's aria-label reads "label: duration" (e.g. "Traditional: 6 weeks"), and the counting numbers are hidden from assistive tech
• A screen-reader-only summary sits below the chart (e.g. "With us takes only 30 minutes, 2016× faster than Traditional.") and is linked with aria-describedby
• Readouts accompany colour, so fast and slow are never told apart by colour alone
• When the user's system has reduce motion enabled, bar widths and numbers jump straight to their final values and the ratio badge appears immediately