added backdrop and loading screen

This commit is contained in:
Anirban Kar
2024-12-08 22:53:20 +05:30
parent 9f002279b6
commit b304749b21
4 changed files with 81 additions and 35 deletions

View File

@@ -0,0 +1,14 @@
export const LoadingOverlay = ({ message = 'Loading...' }) => {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
{/* Loading content */}
<div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
<div
className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
style={{ fontSize: '2rem' }}
></div>
<p className="text-lg text-bolt-elements-textTertiary">{message}</p>
</div>
</div>
);
};