Preloader-Loading

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      background-color: #transparent;
    }

    .preloader {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .circle-container {
      display: flex;
    }

    .circle {
      width: 20px;
      height: 20px;
      margin: 0 15px;
      background-color: #3498db;
      border-radius: 50%;
      animation: scaleAndRotate 2s infinite alternate, pulsate 1s infinite alternate;
    }

    #circle2 {
      animation-duration: 1.5s;
      animation-direction: reverse;
    }

    #circle3 {
      animation-duration: 2s;
    }

    #circle4 {
      animation-duration: 1.8s;
      animation-direction: reverse;
    }

    #circle5 {
      animation-duration: 2.3s;
    }

    .loading-text {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 24px; /* 20% bigger */
      letter-spacing: 5px;
      text-align: center;
      margin-top: 10px; /* Adjust as needed */
    }

    .loading-text span {
      display: inline-block;
      opacity: 0;
      animation: fadeIn 2s infinite alternate, bounce 1s infinite alternate;
    }

    @keyframes scaleAndRotate {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes pulsate {
      0%, 100% {
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.8);
      }
      50% {
        box-shadow: 0 0 20px rgba(52, 152, 219, 0.8);
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
   ...