41 lines
894 B
TypeScript
41 lines
894 B
TypeScript
import { Box } from './Box';
|
|
|
|
export interface LoadingSpinnerProps {
|
|
size?: 'sm' | 'md' | 'lg' | number;
|
|
intent?: 'primary' | 'high' | 'low';
|
|
}
|
|
|
|
export const LoadingSpinner = ({
|
|
size = 'md',
|
|
intent = 'primary'
|
|
}: LoadingSpinnerProps) => {
|
|
const sizeMap = {
|
|
sm: '1rem',
|
|
md: '2rem',
|
|
lg: '3rem',
|
|
};
|
|
|
|
const dimension = typeof size === 'string' ? sizeMap[size] : `${size * 0.25}rem`;
|
|
|
|
const intentColorMap = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
high: 'var(--ui-color-text-high)',
|
|
low: 'var(--ui-color-text-low)',
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
width={dimension}
|
|
height={dimension}
|
|
style={{
|
|
border: '2px solid rgba(255, 255, 255, 0.1)',
|
|
borderTop: `2px solid ${intentColorMap[intent]}`,
|
|
borderRadius: '50%',
|
|
}}
|
|
className="animate-spin"
|
|
role="status"
|
|
aria-label="Loading"
|
|
/>
|
|
);
|
|
};
|