'init'

app/components/AnimatedRoundedProgress/AnimatedRoundedProgress.module.css

@@ -0,0 +1,12 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animatedRoundedProgress {
+  animation: spin 2s linear infinite;
+}

app/components/AnimatedRoundedProgress/AnimatedRoundedProgress.tsx

@@ -0,0 +1,23 @@
+import { RingProgress } from "@mantine/core";
+import classes from './AnimatedRoundedProgress.module.css'
+
+interface AnimatedRoundedProgressProps {
+    value: number;
+    size?: number;
+    color?: string;
+}
+
+export function AnimatedRoundedProgress(props : AnimatedRoundedProgressProps) {
+    const value = Math.min(100, Math.max(0, props.value));
+    const color = props.color || 'white';
+    return (
+        <RingProgress
+            size={props.size || 20}
+            sections={[{ value, color: color }, { value: 100 - value, color: 'transparent' }]}
+            transitionDuration={250}
+            thickness={2}
+            roundCaps
+            className={classes.animatedRoundedProgress}
+        />
+    );
+}