2022-12-13 22:31:32 +01:00
|
|
|
import styles from './Loader.module.css'
|
|
|
|
|
2021-10-24 06:09:43 +02:00
|
|
|
export interface LoaderProps {
|
|
|
|
width?: number
|
|
|
|
height?: number
|
2022-03-16 11:25:44 +01:00
|
|
|
className?: string
|
2021-10-24 06:09:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export const Loader: React.FC<LoaderProps> = (props) => {
|
|
|
|
const { width = 50, height = 50 } = props
|
|
|
|
|
|
|
|
return (
|
2022-03-16 11:25:44 +01:00
|
|
|
<div className={props.className}>
|
2022-12-13 22:31:32 +01:00
|
|
|
<div
|
|
|
|
data-cy='progress-spinner'
|
2023-04-03 00:11:19 +02:00
|
|
|
className='relative mx-auto my-0 before:block before:pt-[100%] before:content-none'
|
2022-12-13 22:31:32 +01:00
|
|
|
style={{ width: `${width}px`, height: `${height}px` }}
|
|
|
|
>
|
2023-01-11 17:39:09 +01:00
|
|
|
<svg className={styles['progressSpinnerSvg']} viewBox='25 25 50 50'>
|
2021-10-24 06:09:43 +02:00
|
|
|
<circle
|
2023-01-11 17:39:09 +01:00
|
|
|
className={styles['progressSpinnerCircle']}
|
2021-10-24 06:09:43 +02:00
|
|
|
cx='50'
|
|
|
|
cy='50'
|
|
|
|
r='20'
|
|
|
|
fill='none'
|
|
|
|
strokeWidth='2'
|
|
|
|
strokeMiterlimit='10'
|
|
|
|
/>
|
|
|
|
</svg>
|
|
|
|
</div>
|
2022-03-16 11:25:44 +01:00
|
|
|
</div>
|
2021-10-24 06:09:43 +02:00
|
|
|
)
|
|
|
|
}
|