[docs][joy-ui] Integrate a count-up feature to the Circular Progress

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

@@ -93,6 +93,14 @@ You can use these to customize the component with both the `sx` prop and the the
 
 {{"demo": "CircularProgressVariables.js", "hideToolbar": true, "bg": "gradient"}}
 
+## Common examples
+
+### Count up feature
+
+Using the [use-count-up](https://www.npmjs.com/package/use-count-up) package, you can create a counting animation by providing `start`, `end`, and `duration` values.
+
+{{"demo": "CircularProgressCountUp.js"}}
+
 ## Accessibility
 
 Out of the box, the `aria-valuenow` attribute will indicate the current value of the progress bar only when the value is not indeterminate.