42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { VariantProps } from 'class-variance-authority'
|
|
|
|
import { variants } from './variants'
|
|
import { ProgressBar } from 'react-aria-components'
|
|
|
|
export interface LoadingProps extends VariantProps<typeof variants> {
|
|
ariaLabel?: string
|
|
size?: number
|
|
}
|
|
|
|
export function Loading({
|
|
ariaLabel = 'Loading',
|
|
size = 20,
|
|
type,
|
|
}: LoadingProps) {
|
|
const classNames = variants({
|
|
type,
|
|
})
|
|
|
|
return (
|
|
<ProgressBar aria-label={ariaLabel} isIndeterminate className={classNames}>
|
|
<svg
|
|
className={classNames}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
height={size}
|
|
viewBox="0 0 20 20"
|
|
width={size}
|
|
>
|
|
<circle cx="50%" cy="8.6955%" r="8.6955%" />
|
|
<circle cx="80.435%" cy="21.73915%" r="8.6955%" />
|
|
<circle cx="91.3045%" cy="50%" r="8.6955%" />
|
|
<circle cx="80.435%" cy="78.261%" r="8.6955%" />
|
|
<circle cx="50%" cy="91.3045%" r="8.6955%" />
|
|
<circle cx="19.5652%" cy="78.261%" r="8.6955%" />
|
|
<circle cx="8.6955%" cy="50%" r="8.6955%" />
|
|
<circle cx="19.5652%" cy="21.73915%" r="8.6955%" />
|
|
</svg>
|
|
</ProgressBar>
|
|
)
|
|
}
|