Creating a Stunning Liquid Glass Effect Loader in CSS

Learn how to build a mesmerizing liquid glass effect loader using HTML and CSS. This modern loader combines glassmorphism with a fluid, animated liquid.

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Liquid Glass Loader</title>
  <style>
    body {
      background: linear-gradient(135deg, #1e3c72, #2a5298); /* Dark gradient for contrast */
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .loader-container {
      position: relative;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.1); /* Glass-like semi-transparent background */
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%; /* Circular loader */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }

    .liquid {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, #00c6ff, #0072ff); /* Blue liquid gradient */
      opacity: 0.7;
      animation: liquid-flow 3s ease-in-out infinite; /* Liquid animation */
      transform-origin: center;
      border-radius: 50%;
    }

    /* Liquid flow animation */
    @keyframes liquid-flow {
      0% {
        transform: translateY(70%) rotate(0deg) scale(1.1);
        border-radius: 50% 50% 30% 30%;
      }
      50% {
        transform: translateY(30%) rotate(180deg) scale(1);
        border-radius: 30% 30% 50% 50%;
      }
      100% {
        transform: translateY(70%) rotate(360deg) scale(1.1);
        border-radius: 50% 50% 30% 30%;
      }
    }

    /* Enhanced shine effect */
    .liquid::before {
      content: '';
      position: absolute;
      width: 25px; /* Slightly wider shine */
      height: 25px; /* Circular shine for a spotlight effect */
      background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 20%, transparent 70%); /* Circular glow */
      border-radius: 50%;
      animation: shine 3s ease-in-out infinite; /* Sync with liquid */
      opacity: 0.7;
      transform: translate(-50%, -50%); /* Center the shine */
    }

    @keyframes shine {
      0% {
        transform: translate(20px, 60px) scale(0.8);
        opacity: 0.5;
      }
      50% {
        transform: translate(50px, 30px) scale(1.2);
        opacity: 0.8;
      }
      100% {
        transform: translate(80px, 60px) scale(0.8);
        opacity: 0.5;
      }
    }

    /* Optional loading text */
    .loading-text {
      position: absolute;
      bottom: -40px;
      color: #fff;
      font-size: 16px;
      text-align: center;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="loader-container">
    <div class="liquid"></div>
    <div class="loading-text">Loading...</div>
  </div>
</body>
</html>