Tiny, framework-agnostic progress bar for browser apps. Great for route transitions, async actions, and "loading" UX.
npm install @elliotanderson43/progressbarTiny, framework-agnostic progress bar for browser apps.
Great for route transitions, async actions, and "loading" UX.
``bash`
npm i @elliotanderson43/progressbaror
pnpm add @elliotanderson43/progressbaror
yarn add @elliotanderson43/progressbar
`ts
import { createProgressBar } from "@elliotanderson43/progressbar";
const bar = createProgressBar({
color: "#29d",
height: 3,
position: "top", // "top" | "bottom"
minDurationMs: 250, // prevents "flash" on fast operations
});
bar.start();
setTimeout(() => bar.done(), 1200);
`
track() keeps the bar visible until all tracked operations finish.
`ts
import { createProgressBar } from "@elliotanderson43/progressbar";
const bar = createProgressBar();
const a = bar.track(fetch("/api/a"));
const b = bar.track(fetch("/api/b"));
await Promise.all([a, b]); // bar finishes after both complete
`
You can also override the minimum duration per operation:
`ts`
await bar.track(fetch("/api/fast"), { minDurationMs: 400});
For real progress (0 to 1):
`ts
const bar = createProgressBar();
bar.start();
bar.set(0.25);
bar.set(0.5);
bar.set(0.9);
bar.done();
`
`ts
const bar = createProgressBar();
bar.setPosition("bottom");
bar.setColor("#10b981"); // green
// or:
bar.configure({ color: "#e11d48", height: 4 });
`
- createProgressBar(options?)bar.start()
- bar.set(progress: number)
- bar.inc(amount?: number)
- bar.done(force?: boolean)
- bar.wrap(fn: () => Promise
- bar.track(promise: Promise
- bar.setPosition("top" | "bottom")
- bar.setColor(color: string)
- bar.configure(options)
- bar.destroy()`
-
MIT