← back to Watches

src/components/PremiumLoader.jsx

130 lines

import React from 'react';
import { motion } from 'framer-motion';

/**
 * Premium Loading Component
 * Features: Luxury spinner, animated logo, progress indicator
 */
const PremiumLoader = ({ progress = null }) => {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Animated background */}
      <div className="absolute inset-0 bg-gradient-luxury-dark">
        <div className="absolute inset-0">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-gradient-to-br from-orange-500/20 to-transparent rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-gradient-to-br from-red-500/20 to-transparent rounded-full blur-3xl animate-pulse" />
        </div>
      </div>

      {/* Main loader content */}
      <div className="relative z-10 text-center">
        {/* Luxury spinner */}
        <motion.div
          className="relative mb-8"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ duration: 0.5, type: 'spring' }}
        >
          {/* Outer ring */}
          <div className="luxury-spinner mx-auto" />

          {/* Inner watch icon */}
          <motion.div
            className="absolute inset-0 flex items-center justify-center"
            animate={{
              rotate: 360,
            }}
            transition={{
              duration: 3,
              repeat: Infinity,
              ease: 'linear',
            }}
          >
            <span className="text-4xl">⌚</span>
          </motion.div>
        </motion.div>

        {/* Brand name with luxury text reveal */}
        <motion.h1
          className="text-4xl md:text-5xl font-display font-bold mb-4"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
        >
          <span className="text-gold">OMEGA</span>
        </motion.h1>

        {/* Loading text */}
        <motion.p
          className="text-lg text-gray-300 font-luxury mb-6"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
        >
          Loading Excellence...
        </motion.p>

        {/* Progress bar (if progress is provided) */}
        {progress !== null && (
          <motion.div
            className="w-64 mx-auto"
            initial={{ opacity: 0, scaleX: 0 }}
            animate={{ opacity: 1, scaleX: 1 }}
            transition={{ delay: 0.7 }}
          >
            <div className="h-1 bg-gray-800 rounded-full overflow-hidden">
              <motion.div
                className="h-full bg-gradient-gold shadow-gold"
                initial={{ width: '0%' }}
                animate={{ width: `${progress}%` }}
                transition={{ duration: 0.3 }}
              />
            </div>
            <p className="text-sm text-gold mt-2 font-bold">{Math.round(progress)}%</p>
          </motion.div>
        )}

        {/* Animated loading dots */}
        <motion.div
          className="flex justify-center gap-2 mt-8"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8 }}
        >
          {[0, 1, 2].map((i) => (
            <motion.div
              key={i}
              className="w-2 h-2 rounded-full bg-gold"
              animate={{
                scale: [1, 1.5, 1],
                opacity: [0.5, 1, 0.5],
              }}
              transition={{
                duration: 1.5,
                repeat: Infinity,
                delay: i * 0.2,
              }}
            />
          ))}
        </motion.div>

        {/* Decorative elements */}
        <motion.div
          className="absolute -top-20 left-1/2 -translate-x-1/2 w-1 h-16 bg-gradient-to-b from-transparent via-gold to-transparent"
          initial={{ scaleY: 0 }}
          animate={{ scaleY: 1 }}
          transition={{ delay: 0.2, duration: 0.8 }}
        />
        <motion.div
          className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-1 h-16 bg-gradient-to-t from-transparent via-gold to-transparent"
          initial={{ scaleY: 0 }}
          animate={{ scaleY: 1 }}
          transition={{ delay: 0.2, duration: 0.8 }}
        />
      </div>
    </div>
  );
};

export default PremiumLoader;