1
1
mirror of https://github.com/theoludwig/react-component-form.git synced 2024-07-17 07:30:13 +02:00
react-component-form/example/components/design/Loader/Loader.tsx

34 lines
852 B
TypeScript
Raw Permalink Normal View History

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