https://github.com/mui/material-ui/issues/38682

docs/data/joy/components/circular-progress/CircularProgressCountUp.js

@@ -0,0 +1,46 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressDeterminate() {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const { value: value1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={() => setIsLoading(true)}>
+          Start
+        </Button>
+      </Stack>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={reset}>
+          Reset
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx

@@ -0,0 +1,46 @@
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import CircularProgress from '@mui/joy/CircularProgress';
+import Stack from '@mui/joy/Stack';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import { useCountUp } from 'use-count-up';
+
+export default function CircularProgressDeterminate() {
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const { value: value1 } = useCountUp({
+    isCounting: isLoading,
+    duration: 1,
+    start: 0,
+    end: 25,
+  });
+
+  const { value: value2, reset } = useCountUp({
+    isCounting: true,
+    duration: 1,
+    start: 0,
+    end: 75,
+  });
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value1}>
+          <Typography>{value1}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={() => setIsLoading(true)}>
+          Start
+        </Button>
+      </Stack>
+      <Stack sx={{ gap: 2 }}>
+        <CircularProgress size="lg" determinate value={value2}>
+          <Typography>{value2}%</Typography>
+        </CircularProgress>
+        <Button size="sm" onClick={reset}>
+          Reset
+        </Button>
+      </Stack>
+    </Box>
+  );
+}

docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview

@@ -0,0 +1,6 @@
+<CircularProgress size="lg" determinate value={value1}>
+  <Typography>{value1}%</Typography>
+</CircularProgress>
+<CircularProgress size="lg" determinate value={value2}>
+    <Typography>{value2}%</Typography>
+</CircularProgress>

docs/data/joy/components/circular-progress/circular-progress.md

@@ -68,6 +68,27 @@ The `determinate` prop lets you indicate a specified wait time.
 
 {{"demo": "CircularProgressDeterminate.js"}}
 
+### Determinate Count Up
+
+This method uses an external `use-count-up` package, to animate counting up by providing `start, end and duration` values.
+
+<codeblock storageKey="package-manager">
+```bash npm
+npm install use-count-up
+```
+
+```bash yarn
+yarn add use-count-up
+```
+
+```bash pnpm
+pnpm add use-count-up
+```
+
+</codeblock>
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ### Children
 
 By default, any children nested inside the Circular Progress will be centered.