# AnimatedCircularProgressBar

> A circular gauge for a value against a quota, with the number in the middle.

## Facts

- **Product**: Max
- **Family**: Feedback
- **Global**: `window.DigitalCrew.AnimatedCircularProgressBar`
- **Source**: `max-agent: src/components/ui/animated-circular-progress-bar.tsx`
- **Import in the app**: `import { AnimatedCircularProgressBar } from "@/components/ui/animated-circular-progress-bar";`
- **Live preview**: /design/components/animated-circular-progress-bar/preview.html
- **Page**: /design/components/animated-circular-progress-bar

## Guidelines

**Use it for** usage meters (AI credits, sending quota) on settings and billing cards.

**What you provide**: `value`, `min`/`max` (0–100 default), `gaugePrimaryColor` and `gaugeSecondaryColor` as CSS colours — pass `var(--primary)` and `var(--muted)` so it follows the theme — and a size and text size through `className`. Always label it with the numbers beside it ("6,800 of 10,000 used").

## API

```ts
/**
 * Affiche une jauge circulaire animée.
 * @param {{max?: number, min?: number, value?: number, gaugePrimaryColor: string, gaugeSecondaryColor: string, className?: string}} props
 */
export declare function AnimatedCircularProgressBar({ max, min, value, gaugePrimaryColor, gaugeSecondaryColor, className, }: {
    max?: number;
    min?: number;
    value?: number;
    gaugePrimaryColor: string;
    gaugeSecondaryColor: string;
    className?: string;
}): any;
```

## Example

```html
<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: "flex items-center gap-8" },
    h(DC.AnimatedCircularProgressBar, { value: 68, gaugePrimaryColor: "var(--primary)", gaugeSecondaryColor: "var(--muted)", className: "size-32 text-2xl" }),
    h("div", { className: "grid gap-1" },
      h("p", { className: "text-sm font-medium" }, "AI credits this month"),
      h("p", { className: "text-sm text-muted-foreground" }, "6,800 of 10,000 used · resets 1 Nov")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Feedback

- [Alert](/design/components/alert.md): An inline, non-dismissable notice (`role="alert"`) with an optional icon, a one-line title and a description.
- [HelpTooltip](/design/components/help-tooltip.md): A 16px `HelpCircle` in `muted-foreground` that shows an explanation on hover or focus.
- [Progress](/design/components/progress.md): A determinate bar: `primary` fill on `primary` at 20%, 8px tall, `r-full`.
- [Skeleton](/design/components/skeleton.md): A placeholder block that pulses (`t-skel-pulse`, 1s) in `accent` while content loads.
- [Toaster](/design/components/toaster.md): Toast notifications (Sonner) on the `popover` surface with a `border` and `radius-lg`; mount one `Toaster` at the root and call `toast()` from anywhere.