29 lines
859 B
TypeScript
29 lines
859 B
TypeScript
export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
|
|
const sizeMap = {
|
|
small: "16px",
|
|
medium: "24px",
|
|
large: "32px"
|
|
};
|
|
|
|
return (
|
|
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
|
|
<div
|
|
style={{
|
|
width: sizeMap[size],
|
|
height: sizeMap[size],
|
|
border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
|
|
borderTopColor: "currentColor",
|
|
borderRadius: "50%",
|
|
animation: "spin 0.8s linear infinite"
|
|
}}
|
|
></div>
|
|
{text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
|
|
<style>{`
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|