[docs][material-ui][CircularProgress] Add Circular size demo (#43734)

Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
mui · Sep 13, 2024 · 9a78191 · 9a78191
1 parent a60c952
commit 9a78191
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 0 deletions.
diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularSize() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <CircularProgress size="30px" />
+      <CircularProgress size={40} />
+      <CircularProgress size="3rem" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/CircularSize.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularSize() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <CircularProgress size="30px" />
+      <CircularProgress size={40} />
+      <CircularProgress size="3rem" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/progress/CircularSize.tsx.preview b/docs/data/material/components/progress/CircularSize.tsx.preview
@@ -0,0 +1,3 @@
+<CircularProgress size="30px" />
+<CircularProgress size={40} />
+<CircularProgress size="3rem" />
diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md
@@ -30,6 +30,10 @@ The animations of the components rely on CSS as much as possible to work even be
 
 {{"demo": "CircularColor.js"}}
 
+### Circular size
+
+{{"demo": "CircularSize.js"}}
+
 ### Circular determinate
 
 {{"demo": "CircularDeterminate.js"}}