Animated Progress bar with source code

Animated Progress bar with source code
December 28, 2023

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

  1. HTML sets up the progress bar.
  2. CSS styles the bar and creates the bubble effect. The gradient makes the bar pop, and the bubbles use keyframe animations to float up.
  3. JavaScript dynamically updates the progress bar's width and spawns the bubbles at intervals.



Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Master JavaScript by Solving Daily Challenges

Challenge Yourself Daily: Advance Your JavaScript Skills and Career

View Challenges

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates