Circular Progress

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function BasicDemo() {
  return <CircularProgress value={60} magnitude="md" tone="brand" aria-label="Sync progress" />;
}

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function TonesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} magnitude="md" tone="brand" aria-label="Sync progress" />
      <CircularProgress value={60} magnitude="md" tone="success" aria-label="Backup progress" />
      <CircularProgress value={60} magnitude="md" tone="warning" aria-label="Storage used" />
      <CircularProgress value={60} magnitude="md" tone="danger" aria-label="Quota used" />
    </div>
  );
}

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <CircularProgress value={60} magnitude="sm" tone="brand" aria-label="Small ring" />
      <CircularProgress value={60} magnitude="md" tone="brand" aria-label="Medium ring" />
    </div>
  );
}

import { CircularProgress } from "@makeplane/propel/components/circular-progress";

export default function IndeterminateDemo() {
  return <CircularProgress value={null} magnitude="md" tone="brand" aria-label="Syncing" />;
}