Spaces:
Running
Running
File size: 1,308 Bytes
ce8f04a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | import React from 'react';
interface SkeletonProps {
count?: number;
height?: string;
width?: string;
borderRadius?: string;
className?: string;
style?: React.CSSProperties;
}
export const SkeletonLoader: React.FC<SkeletonProps> = ({
count = 1,
height = '140px',
width = '100%',
borderRadius = '14px',
className = '',
style = {}
}) => {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }} className={className}>
{Array.from({ length: count }).map((_, i) => (
<div
key={i}
style={{
background: 'var(--bg-elevated, #f3f4f6)',
border: '1px solid var(--border-subtle, #e5e7eb)',
borderRadius,
height,
width,
animation: 'pulse 1.5s ease-in-out infinite',
opacity: 0.6,
...style
}}
/>
))}
<style>{`
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 0.3; }
}
`}</style>
</div>
);
};
|