Progress

Guidelines#

Use it for work with a known end: enrichment runs, imports, warm-up days, quota use. Pair it with the outcome in numbers ("63 of 100"). An import whose provider gives no percentage uses a sweeping activity bar instead (animate-unibox-sync-sweep), which stops travelling under reduced motion.

What you provide: value (0–100) and a label beside it.

Facts#

API#

TypeScript declarations emitted from src/components/ui/progress.tsx (the module also exports its other parts).

declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): any;
export { Progress };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "grid gap-4 max-w-md" },
    h("div", { className: "grid gap-2" },
      h("div", { className: "flex justify-between text-sm" }, h("span", null, "Enriching 100 contacts"), h("span", { className: "tabular-nums text-muted-foreground" }, "63 of 100")),
      h(DC.Progress, { value: 63 })),
    h("div", { className: "grid gap-2" },
      h("div", { className: "flex justify-between text-sm" }, h("span", null, "Warm-up"), h("span", { className: "tabular-nums text-muted-foreground" }, "Day 9 of 14")),
      h(DC.Progress, { value: 64 })));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Feedback#