Create Loader with Percentage Counter Using HTML CSS JS

If you’ve ever visited a website or web app and saw a spinning animation with a loading percentage, you’ve experienced the magic of a loader with a progress counter. These UI elements provide a better user experience by keeping users engaged while data or resources load in the background.

In this tutorial, you’ll learn how to create a loader with a percentage counter using HTML, CSS and JavaScript — no libraries, no SVGs and no frameworks. Just pure frontend development. This circular animated loader not only looks great but is fully customizable and lightweight enough to fit into any modern website or app.

Let’s dive into building a fully responsive, animated percentage loader step by step.

What We’ll Build

A spinning circular loader that:

• Has glowing inset borders
• Rotates smoothly
• Displays an animated percentage counter inside
• Uses pure CSS for visuals and JavaScript for dynamic percentage

Perfect for loading screens, content placeholders or UI transitions.

HTML Structure

We’ll start by creating the basic markup. Our loader consists of a wrapper, an outer ring and an inner text area that displays the loading percentage and a simple message like “Loading…”.

<div class="main-container">
    <div class="loader">
        <div class="outer"></div>
        <div class="inner">
            <div class="count"></div>
            <div class="text">Loading...</div>
        </div>
    </div>
</div>

In this HTML structure, we have a main container with the class ‘main-container’. Within that container, we have defined two main sections inside the loader i.e. the outer and the inner content. The loader section contains a ‘div’ with the class ‘outer’, which will serve as the outer circle of the loading animation. The inner section holds the count value and the loading text.

Styling the Loader with CSS

Now let’s bring the loader to life with some CSS. We’ll create a circular effect using border-radius, animation using keyframes and add glowing shadows for that polished look.

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 300px;
    justify-content: center;
    font-family: 'calibri';
    align-items: center;
}

.loader {
    min-width: 250px;
    height: 250px;
    font-family: calibri;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outer {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 100%;
    animation: loading_animation .7s linear infinite;
    box-shadow: inset 0px 0px 20px 7px #000000a6, inset 0px 0px 20px 1px #00000066, inset 0px 0px 0px 30px #ffffff91;
}

.inner {
    color: white;
    font-size: 2rem;
    position: absolute;
    font-style: italic;
    text-align: center;
}

.text {
    font-size: 1rem;
}

.outer::before,
.outer::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(3px);
    border-radius: 100%;
    box-sizing: border-box;
    border-left: 10px solid #ffffffd1;
    border-right: 10px solid #ffffffd1;
}

.outer::after {
    left: 50%;
    top: 50%;
    width: 80%;
    height: 80%;
    filter: blur(6px);
    transform: translate(-50%, -50%);
    border: 10px solid #000000;
}

@keyframes loading_animation {
    to {
        transform: rotate(360deg);
    }
}

• Applies rotation animation to the outer circle.
• Uses pseudo-elements to simulate a glowing layered ring.
• Makes the loader visually engaging while staying simple and scalable.

JavaScript for Dynamic Percentage

The rotating ring is purely visual — but we want a counting percentage inside.

Here’s a simple JavaScript snippet that updates the count every 100ms:

let value = 0;
setInterval(() => {
    document.querySelector('.count').innerText = value + '%';
    (value < 100) ? value++ : value = 0;
}, 100)

This loop makes the loader look active and realistic, giving users a sense of progress.

Conclusion

Creating a loader with a percentage counter using HTML, CSS and JavaScript is a great way to enhance the user experience while content is being loaded. With just a few lines of code, you can build a lightweight, responsive and fully customizable loader that fits perfectly into any modern web project.

Whether you’re designing for a dashboard, portfolio or web app, this circular loading animation with text and percentage is easy to implement and adds a polished, professional touch.

Now that you know how to create this from scratch, feel free to tweak the design, colors and animation speed to match your project needs. Keep experimenting and building clean UI components — they go a long way in creating a great first impression.