24 lines
717 B
TypeScript
24 lines
717 B
TypeScript
import { memo } from 'react'
|
|
|
|
export const Loading = memo(() => (
|
|
<div className='absolute inset-0 flex flex-col items-center justify-center bg-muted animate-[fade-in_0.3s_ease-out] z-[100]'>
|
|
<div className='relative h-[4px] w-[200px] overflow-hidden rounded-full bg-border/50'>
|
|
<div className='absolute inset-y-0 h-full rounded-full bg-primary/40 animate-[loading_1.5s_infinite_linear]' />
|
|
</div>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
@keyframes loading {
|
|
0% { left: -40%; width: 40%; }
|
|
100% { left: 100%; width: 40%; }
|
|
}
|
|
@keyframes fade-in {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
`,
|
|
}}
|
|
/>
|
|
</div>
|
|
))
|