23 lines
715 B
TypeScript
23 lines
715 B
TypeScript
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}
|
|
/>
|
|
);
|
|
} |