diff --git a/chartlets.js/src/lib/components/CircularProgress.tsx b/chartlets.js/src/lib/components/CircularProgress.tsx
new file mode 100644
index 00000000..b75a80e6
--- /dev/null
+++ b/chartlets.js/src/lib/components/CircularProgress.tsx
@@ -0,0 +1,30 @@
+import MuiCircularProgress from "@mui/material/CircularProgress";
+
+import { type ComponentState } from "@/lib/types/state/component";
+import type { ComponentProps } from "@/lib/component/Component";
+
+interface CircularProgressState extends ComponentState {
+  size?: number | string;
+  value?: number;
+  variant?: "determinate" | "indeterminate";
+}
+
+interface CircularProgressProps extends ComponentProps, CircularProgressState {}
+
+export function CircularProgress({
+  id,
+  style,
+  size,
+  value,
+  variant,
+}: CircularProgressProps) {
+  return (
+    <MuiCircularProgress
+      id={id}
+      style={style}
+      size={size}
+      value={value}
+      variant={variant}
+    />
+  );
+}
diff --git a/chartlets.js/src/lib/index.ts b/chartlets.js/src/lib/index.ts
index 12631ce2..2c2cde63 100644
--- a/chartlets.js/src/lib/index.ts
+++ b/chartlets.js/src/lib/index.ts
@@ -40,6 +40,7 @@ import { registry } from "@/lib/component/Registry";
 import { Box } from "@/lib/components/Box";
 import { Button } from "@/lib/components/Button";
 import { Checkbox } from "@/lib/components/Checkbox";
+import { CircularProgress } from "@/lib/components/CircularProgress";
 import { Plot } from "@/lib/components/Plot";
 import { Select } from "@/lib/components/Select";
 import { Typography } from "@/lib/components/Typography";
@@ -47,6 +48,7 @@ import { Typography } from "@/lib/components/Typography";
 registry.register(Box);
 registry.register(Button);
 registry.register(Checkbox);
+registry.register(CircularProgress);
 registry.register(Plot);
 registry.register(Select);
 registry.register(Typography);