From 5e1ea401750742c7841451b8e9ac7dca95d73bbb Mon Sep 17 00:00:00 2001
From: anon-phantom <0x01.phantom@gmail.com>
Date: Wed, 30 Aug 2023 16:25:16 +0300
Subject: [PATCH] https://github.com/mui/material-ui/issues/38682

---
 .../CircularProgressCountUp.js                | 46 +++++++++++++++++++
 .../CircularProgressCountUp.tsx               | 46 +++++++++++++++++++
 .../CircularProgressCountUp.tsx.preview       |  6 +++
 .../circular-progress/circular-progress.md    | 21 +++++++++
 4 files changed, 119 insertions(+)
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.js
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
 create mode 100644 docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview

diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.js b/docs/data/joy/components/circular-progress/CircularProgressCountUp.js
new file mode 100644
index 00000000000000..75123949a988c2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx
new file mode 100644
index 00000000000000..75123949a988c2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview b/docs/data/joy/components/circular-progress/CircularProgressCountUp.tsx.preview
new file mode 100644
index 00000000000000..b8a37e4ac6a4a1
--- /dev/null
+++ b/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>
diff --git a/docs/data/joy/components/circular-progress/circular-progress.md b/docs/data/joy/components/circular-progress/circular-progress.md
index 1e3d4e7113575d..2a48ef936299bc 100644
--- a/docs/data/joy/components/circular-progress/circular-progress.md
+++ b/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.