<!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>