glitchier-soc/app/javascript/flavours/glitch/components/circular_progress.tsx
alfe 9bf63257fb [Glitch] Rewrite <LoadingIndicator/> as FC and TS (#25364)
Port a86886b1fd to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2023-06-18 12:10:37 +02:00

27 lines
539 B
TypeScript

interface Props {
size: number;
strokeWidth: number;
}
export const CircularProgress: React.FC<Props> = ({ size, strokeWidth }) => {
const viewBox = `0 0 ${size} ${size}`;
const radius = (size - strokeWidth) / 2;
return (
<svg
width={size}
height={size}
viewBox={viewBox}
className='circular-progress'
role='progressbar'
>
<circle
fill='none'
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
/>
</svg>
);
};