Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 53x 53x 6x 53x | import React from "react";
interface LoadingSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
size?: "sm" | "md" | "lg";
}
const sizeMap = {
sm: "w-4 h-4",
md: "w-6 h-6",
lg: "w-8 h-8",
};
const LoadingSpinner = React.forwardRef<HTMLDivElement, LoadingSpinnerProps>(
({ size = "md", className = "", ...props }, ref) => (
<div
className={`
inline-flex items-center justify-center
${className}
`}
ref={ref}
{...props}
>
<svg className={`${sizeMap[size]} animate-spin text-primary`} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
</div>
)
);
LoadingSpinner.displayName = "LoadingSpinner";
export { LoadingSpinner };
|