Hey there! Let's dive into how we can spice up a web page with an animated progress bar. This isn't just your standard loader;
It's a gradient progress bar with cool bubble animations that float up, giving it a lively feel. Perfect for when you want to add a bit of flair to your loading screens or display progress in a more engaging way.
We're using the usual trio for web development: HTML, CSS, and JavaScript. HTML sets up the structure, CSS brings in the style and animations, and JavaScript makes everything dynamic.
HTML Code:
Our HTML is super simple. We've got a container div for the progress bar and another div inside it that will represent the progress.
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
CSS Code:
Here's where we add some style. We're going for a dark theme (easy on the eyes and looks sleek). The progress bar itself has a gradient for that extra visual punch. The bubbles are created using small span elements that we'll animate to float upwards.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e1e;
color: #fff;
}
.progress-bar {
width: 70%;
height: 30px;
background-color: #333;
border-radius: 15px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0;
background: linear-gradient(45deg, #1e0ef8, #8745e4, #2929a7); /* Gradient effect */
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.particle {
/* Specific styles for the bubble animation */
/* Keyframe animation settings for rising effect */
position: absolute;
bottom: 0;
background-color: white;
border-radius: 50%;
opacity: 0.7;
animation: rise 3s ease-out;
}
@keyframes rise {
0% {
transform: translateY(0);
opacity: 0.7;
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
JavaScript Code:
document.addEventListener('DOMContentLoaded', () => {
const progressBar = document.getElementById('progress');
let width = 0;
const animate = () => {
if (width >= 100) {
clearInterval(interval);
return;
}
width++;
progressBar.style.width = width + '%';
createParticle(progressBar);
};
const interval = setInterval(animate, 100);
function createParticle(parent) {
const particle = document.createElement('span');
particle.classList.add('particle');
const size = Math.random() * 5 + 5;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${Math.random() * 100}%`;
particle.style.animationDuration = `${Math.random() * 2 + 3}s`;
parent.appendChild(particle);
setTimeout(() => particle.remove(), 3000);
}
});
Complete Source Code for Progress Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Gradient Progress Bar</title>
<style>
/* style.css */
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1e1e1e;
/* Dark background */
color: #fff;
/* Light text color for contrast */
}
.progress-bar {
width: 70%;
height: 30px;
background-color: #333;
/* Darker shade for progress bar background */
border-radius: 15px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0;
background: linear-gradient(45deg, #1e0ef8, #8745e4, #2929a7);
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.particle {
position: absolute;
bottom: 0;
background-color: white;
border-radius: 50%;
opacity: 0.7;
animation: rise 3s ease-out;
}
@keyframes rise {
0% {
transform: translateY(0);
opacity: 0.7;
}
100% {
transform: translateY(-100%);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const progressBar = document.getElementById('progress');
let width = 0;
const animate = () => {
if (width >= 100) {
clearInterval(interval);
return;
}
width++;
progressBar.style.width = width + '%';
createParticle(progressBar);
};
const interval = setInterval(animate, 100);
function createParticle(parent) {
const particle = document.createElement('span');
particle.classList.add('particle');
const size = Math.random() * 5 + 5;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${Math.random() * 100}%`;
particle.style.animationDuration = `${Math.random() * 2 + 3}s`;
parent.appendChild(particle);
setTimeout(() => particle.remove(), 3000);
}
});
</script>
</body>
</html>
How It All Works
- HTML sets up the progress bar.
- CSS styles the bar and creates the bubble effect. The gradient makes the bar pop, and the bubbles use keyframe animations to float up.
- JavaScript dynamically updates the progress bar's width and spawns the bubbles at intervals.