Counting Progress Bar
A free controlled progress bar component for React with a synced counter.
meridian-supply.com
Deploy 4182 · main@a91f0c3
Import
248 source assets
Optimise
AVIF and WebP variants
Publish
310 edge locations
Customise
Code
<LoaderProgressCount label="Encoding image variants" value={64} />Counting Progress Bar is a free progress bar component for Next.js and React, styled with Tailwind, that springs its fill and visible percentage towards each controlled value. Pass the current value and an accessible label, then update the value from your upload, setup or processing state.
One shared Motion value keeps the transform-only fill and rounded counter together through increases, decreases and rapid retargeting. The count leads: display-scale tabular figures, with the label as its caption and the track as a thin rule beneath both, and a compact inline size for toasts and table rows. Values clamp safely to 0 through 100, progressbar semantics expose the immediate controlled target, and reduced-motion users receive every update without movement.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/loader-progress-countUsage
import { LoaderProgressCount } from "@/components/loader-progress-count";
export function UploadProgress({ value }: { value: number }) {
return (
<LoaderProgressCount
value={value}
label="Uploading product images"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | required | Controlled target. Finite values clamp to 0 through 100 and non-finite values become 0. |
| label | string | required | Accessible name describing what is progressing. |
| showValue | boolean | true | Whether to render the aria-hidden visual percentage. |
| size | "lg" | "sm" | "lg" | Typographic treatment of the count. lg sets it at display size on its own line above the track; sm keeps it inline beside the label for compact rows. |
| className | string | undefined | Additional classes merged onto the progressbar wrapper. |
Customisation
Counting Progress Bar exposes track, fill and height tokens. Override the colour tokens with semantic theme values and set the height once on an ancestor; the fill still changes only with scaleX, so custom styling never introduces layout work during progress updates.
.upload-progress {
--loader-progress-track: var(--muted);
--loader-progress-fill: var(--primary);
--loader-progress-height: 0.75rem;
}Frequently asked questions
- Is Counting Progress Bar free for commercial use?
- Yes. Counting Progress Bar is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is this React progress bar accessible and reduced-motion safe?
- Yes. It exposes a named progressbar with minimum, maximum and immediate controlled value semantics. The visible percentage is hidden from assistive technology, and reduced-motion users receive synchronous value changes without the spring or completion pulse.
- How do I customise the progress bar?
- Override the loader progress track, fill and height CSS custom properties on any ancestor, use className for wrapper layout, and toggle showValue when the visual percentage is not needed.