Loading Overlay Generator

<div class="loading-overlay">
  <div class="spinner spinner--circle"></div>
  <p class="loading-text">Loading...<span class="loading-dots"></span></p>
</div>

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  opacity: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner--circle {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  color: #374151;
  font-size: 16px;
  margin-top: 16px;
  font-weight: 500;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

import { useState, useEffect } from 'react';

const LoadingOverlay = ({ isLoading }) => {
  if (!isLoading) return null;

  const overlayStyle = {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: '#ffffff',
    opacity: 0.8,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 9999,
  };

  const spinnerStyle = {
    width: 48,
    height: 48,
    border: '4px solid #e5e7eb',
    borderTopColor: '#6366f1',
    borderRadius: '50%',
    animation: 'spin 1s linear infinite',
  };

  return (
    <div style={overlayStyle}>
      <div style={spinnerStyle} />
      <p style={{ color: '#374151', fontSize: 16, marginTop: 16, fontWeight: 500 }}>
        Loading...
      </p>
    </div>
  );
};

export default LoadingOverlay;

// Usage:
// <LoadingOverlay isLoading={true} />

// Add to your global CSS:
// @keyframes spin { to { transform: rotate(360deg); } }