Adding engaging animations to your website can greatly enhance user experience. One such effect is the Liquid Fill Animation, which creates a dynamic water-like motion inside a circular progress bar. In this tutorial, we’ll walk through how to build a smooth and interactive liquid fill animation using HTML and CSS.
🔹 What You’ll Learn
✅ How to create a circular progress container with HTML 🖥️
✅ Styling the wave animation with CSS to simulate liquid motion 🌊
✅ Using keyframes animation for dynamic movement 🎨
✅ Displaying progress text in the center of the animation 📊
✅ Customizing colors and animation speed to match your design 🎯
By the end of this tutorial, you’ll have an eye-catching liquid fill animation that can be used as a loading indicator, progress tracker, or creative UI component. 🚀
💻 Step-by-Step Guide
1️⃣ HTML Structure
We’ll start by creating a circular container to hold the liquid fill animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquid Fill Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Liquid Fill Progress</h1>
<div class="container">
<div class="wave"></div>
<div class="progress-text">70%</div>
</div>
</body>
</html>2️⃣ CSS Styling & Animation
Now, let’s style the container, create the wave animation, and add a fluid movement effect.
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #1e1e2f;
font-family: Arial, sans-serif;
}
h1 {
color: #ffffff;
margin-bottom: 20px;
font-size: 28px;
text-align: center;
}
.container {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #ffffff;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.wave {
position: absolute;
bottom: 0;
width: 200%;
height: 200%;
background: #00bcd4;
animation: wave-animation 4s ease-in-out infinite;
border-radius: 45%;
}
@keyframes wave-animation {
0% {
transform: translate(-50%, 0) rotate(0deg);
}
50% {
transform: translate(-50%, -20%) rotate(180deg);
}
100% {
transform: translate(-50%, 0) rotate(360deg);
}
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #ffffff;
font-weight: bold;
}🎥 Watch the Full Tutorial
For a step-by-step explanation and live demonstration, check out the video tutorial:
📺 Watch on YouTube ➡️
📂 Get the Complete Source Code
Find the full project on GitHub:
🔗 GitHub Repository ➡️ Liquid Fill Animation Code
✨ Final Thoughts
This Liquid Fill Animation adds an engaging and interactive element to your website. Whether it’s used as a loading indicator, a progress bar, or an aesthetic UI effect, this animation is both functional and visually appealing.
💬 What do you think? Let us know in the comments!
👍 Like, Share & Subscribe for more amazing web development tutorials!
🚀 Stay tuned for more exciting CSS animations and UI/UX designs!
#HTML #CSS #WebDesign #Animation #ProgressBar #WebDevelopment #Frontend #InteractiveDesign 🎉