[material-ui][Progress] Add Circular progress gradient demo from Gith…

…ub comment (#40559)
mui · Mar 14, 2024 · 65408b1 · 65408b1
1 parent e6a51d3
commit 65408b1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.js b/docs/data/material/components/progress/CustomizedProgressBars.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import CircularProgress, {
   circularProgressClasses,
 } from '@mui/material/CircularProgress';
@@ -53,12 +54,31 @@ function FacebookCircularProgress(props) {
   );
 }
 
+// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221
+
+function GradientCircularProgress() {
+  return (
+    <React.Fragment>
+      <svg width={0} height={0}>
+        <defs>
+          <linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#e01cd5" />
+            <stop offset="100%" stopColor="#1CB5E0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <CircularProgress sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
+    </React.Fragment>
+  );
+}
+
 export default function CustomizedProgressBars() {
   return (
-    <Box sx={{ flexGrow: 1 }}>
+    <Stack spacing={2} sx={{ flexGrow: 1 }}>
       <FacebookCircularProgress />
+      <GradientCircularProgress />
       <br />
       <BorderLinearProgress variant="determinate" value={50} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx b/docs/data/material/components/progress/CustomizedProgressBars.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import CircularProgress, {
   circularProgressClasses,
   CircularProgressProps,
@@ -54,12 +55,30 @@ function FacebookCircularProgress(props: CircularProgressProps) {
   );
 }
 
+// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221
+function GradientCircularProgress() {
+  return (
+    <React.Fragment>
+      <svg width={0} height={0}>
+        <defs>
+          <linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#e01cd5" />
+            <stop offset="100%" stopColor="#1CB5E0" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <CircularProgress sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
+    </React.Fragment>
+  );
+}
+
 export default function CustomizedProgressBars() {
   return (
-    <Box sx={{ flexGrow: 1 }}>
+    <Stack spacing={2} sx={{ flexGrow: 1 }}>
       <FacebookCircularProgress />
+      <GradientCircularProgress />
       <br />
       <BorderLinearProgress variant="determinate" value={50} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview b/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview
@@ -1,3 +1,4 @@
 <FacebookCircularProgress />
+<GradientCircularProgress />
 <br />
 <BorderLinearProgress variant="determinate" value={50} />