[Joy UI] Add CircularProgress component

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+import IconButton from '@mui/joy/IconButton';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+export default function CircularProgressSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+        Loading…
+      </Button>
+      <IconButton>
+        <CircularProgress thickness={2} />
+      </IconButton>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <Link
+        component="button"
+        variant="outlined"
+        startDecorator={<CircularProgress variant="plain" thickness={2} />}
+        sx={{ p: 1 }}
+      >
+        Submitting...
+      </Link>
+    </Box>
+  );
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Link from '@mui/joy/Link';
+import IconButton from '@mui/joy/IconButton';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+export default function CircularProgressSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+        Loading…
+      </Button>
+      <IconButton>
+        <CircularProgress thickness={2} />
+      </IconButton>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+      <Link
+        component="button"
+        variant="outlined"
+        startDecorator={<CircularProgress variant="plain" thickness={2} />}
+        sx={{ p: 1 }}
+      >
+        Submitting...
+      </Link>
+    </Box>
+  );
+}

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

@@ -0,0 +1,15 @@
+<Button startIcon={<CircularProgress variant="solid" thickness={2} />}>
+  Loading…
+</Button>
+<IconButton>
+  <CircularProgress thickness={2} />
+</IconButton>
+{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+<Link
+  component="button"
+  variant="outlined"
+  startDecorator={<CircularProgress variant="plain" thickness={2} />}
+  sx={{ p: 1 }}
+>
+  Submitting...
+</Link>

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import ReportIcon from '@mui/icons-material/Report';
+import WarningIcon from '@mui/icons-material/Warning';
+
+export default function CircularProgressChildren() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress color="warning">
+        <WarningIcon color="warning" />
+      </CircularProgress>
+      <CircularProgress size="lg" determinate value={66.67}>
+        2 / 3
+      </CircularProgress>
+      <CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+        <ReportIcon color="danger" />
+      </CircularProgress>
+    </Box>
+  );
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import ReportIcon from '@mui/icons-material/Report';
+import WarningIcon from '@mui/icons-material/Warning';
+
+export default function CircularProgressChildren() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress color="warning">
+        <WarningIcon color="warning" />
+      </CircularProgress>
+      <CircularProgress size="lg" determinate value={66.67}>
+        2 / 3
+      </CircularProgress>
+      <CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+        <ReportIcon color="danger" />
+      </CircularProgress>
+    </Box>
+  );
+}

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

@@ -0,0 +1,9 @@
+<CircularProgress color="warning">
+  <WarningIcon color="warning" />
+</CircularProgress>
+<CircularProgress size="lg" determinate value={66.67}>
+  2 / 3
+</CircularProgress>
+<CircularProgress color="danger" sx={{ '--CircularProgress-size': '80px' }}>
+  <ReportIcon color="danger" />
+</CircularProgress>

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

@@ -0,0 +1,66 @@
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+
+export default function CircularProgressColors() {
+  const [variant, setVariant] = React.useState('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
+          gap: 1,
+        }}
+      >
+        <CircularProgress variant={variant} color="primary" />
+        <CircularProgress variant={variant} color="neutral" />
+        <CircularProgress variant={variant} color="danger" />
+        <CircularProgress variant={variant} color="info" />
+        <CircularProgress variant={variant} color="success" />
+        <CircularProgress variant={variant} color="warning" />
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,66 @@
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import { VariantProp } from '@mui/joy';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet from '@mui/joy/Sheet';
+
+export default function CircularProgressColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('solid');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
+          gap: 1,
+        }}
+      >
+        <CircularProgress variant={variant} color="primary" />
+        <CircularProgress variant={variant} color="neutral" />
+        <CircularProgress variant={variant} color="danger" />
+        <CircularProgress variant={variant} color="info" />
+        <CircularProgress variant={variant} color="success" />
+        <CircularProgress variant={variant} color="warning" />
+      </Box>
+      <Sheet
+        sx={{
+          background: 'transparent',
+          pl: 4,
+          borderLeft: '1px solid',
+          borderColor: 'divider',
+        }}
+      >
+        <Typography
+          level="body2"
+          fontWeight="xl"
+          id="variant-label"
+          textColor="text.primary"
+          mb={1}
+        >
+          Variant:
+        </Typography>
+        <RadioGroup
+          size="sm"
+          aria-labelledby="variant-label"
+          name="variant"
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Solid" value="solid" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Plain" value="plain" />
+        </RadioGroup>
+      </Sheet>
+    </Box>
+  );
+}

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

@@ -0,0 +1,27 @@
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import * as React from 'react';
+
+export default function CircularProgressDeterminate() {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress determinate value={25} />
+      <CircularProgress determinate value={50} />
+      <CircularProgress determinate value={75} />
+      <CircularProgress determinate value={100} />
+      <CircularProgress determinate value={progress} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,27 @@
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+import * as React from 'react';
+
+export default function CircularProgressDeterminate() {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10));
+    }, 800);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress determinate value={25} />
+      <CircularProgress determinate value={50} />
+      <CircularProgress determinate value={75} />
+      <CircularProgress determinate value={100} />
+      <CircularProgress determinate value={progress} />
+    </Box>
+  );
+}

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

@@ -0,0 +1,5 @@
+<CircularProgress determinate value={25} />
+<CircularProgress determinate value={50} />
+<CircularProgress determinate value={75} />
+<CircularProgress determinate value={100} />
+<CircularProgress determinate value={progress} />

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+export default function CircularProgressSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress size="sm" />
+      <CircularProgress size="md" />
+      <CircularProgress size="lg" />
+    </Box>
+  );
+}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+export default function CircularProgressSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <CircularProgress size="sm" />
+      <CircularProgress size="md" />
+      <CircularProgress size="lg" />
+    </Box>
+  );
+}

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

@@ -0,0 +1,3 @@
+<CircularProgress size="sm" />
+<CircularProgress size="md" />
+<CircularProgress size="lg" />

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import CircularProgress from '@mui/joy/CircularProgress';
+
+export default function CircularProgressThickness() {
+  return <CircularProgress thickness={1} />;
+}