How to Create an Animated Circular Loader Using HTML and CSS

Mycodingtutorial August 2, 2026 3 min read 0 Comments

Create a beautiful animated circular loader using only HTML and CSS. This tutorial shows you how to build a glowing futuristic loading animation with rotating orbit rings, dotted circles, and neon effects. The design is lightweight, responsive, beginner-friendly, and perfect for landing pages, websites, dashboards, portfolios, and web applications.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Loader Code by Mycodingtutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="loader">

    <div class="dot-ring"></div>

    <div class="orbit orbit1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="orbit orbit2"></div>

    <div class="center"></div>

</div>

</body>
</html>

style.css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#050816;
    overflow:hidden;
    font-family:Arial,sans-serif;
}

.loader{
    position:relative;
    width:260px;
    height:260px;
    animation:rotate 8s linear infinite;
}

/* Outer Ring */

.orbit1{
    position:absolute;
    inset:0;
    border:3px solid rgba(0,170,255,.85);
    border-radius:50%;
    box-shadow:
    0 0 15px #00bfff,
    0 0 40px #0077ff;
}

/* Second Ring */

.orbit2{
    position:absolute;
    inset:14px;
    border:2px solid rgba(0,140,255,.25);
    border-radius:50%;
}

/* Dotted Ring */

.dot-ring{
    position:absolute;
    inset:58px;
    border-radius:50%;
    border:6px dotted #15b8ff;
    opacity:.95;
    animation:spin 12s linear infinite;
}

/* Center Circle */

.center{
    position:absolute;
    width:70px;
    height:70px;
    background:radial-gradient(circle,#ffffff,#6ed8ff);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    box-shadow:
    0 0 20px #4fd4ff,
    0 0 45px #008cff,
    0 0 80px #008cff;
}

/* Orbit Dots */

.orbit1 span{
    position:absolute;
    width:22px;
    height:22px;
    border-radius:50%;
    background:radial-gradient(circle,#8fffff,#11b7ff);
    box-shadow:
    0 0 12px #29d8ff,
    0 0 30px #008cff;
}

.orbit1 span:nth-child(1){
    top:-11px;
    left:50%;
    transform:translateX(-50%);
}

.orbit1 span:nth-child(2){
    top:42px;
    right:-11px;
}

.orbit1 span:nth-child(3){
    bottom:42px;
    right:-11px;
}

.orbit1 span:nth-child(4){
    bottom:-11px;
    left:50%;
    transform:translateX(-50%);
}

.orbit1 span:nth-child(5){
    bottom:42px;
    left:-11px;
}

.orbit1 span:nth-child(6){
    top:42px;
    left:-11px;
}

/* Animation */

@keyframes rotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes spin{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

Conclusion

In this tutorial, you learned how to create a modern animated circular loader using pure HTML and CSS. By combining rotating orbit rings, glowing effects, and smooth CSS animations, you can build an eye-catching preloader without using JavaScript.

This circular loader is lightweight, responsive, and easy to customize for portfolios, landing pages, dashboards, and other web projects. Experiment with different colors, sizes, animation speeds, and glow effects to match your website’s style.

If you found this tutorial helpful, explore more HTML and CSS animation projects to improve your frontend development skills and create even more engaging user interfaces.

Tags:

Post Rating

6.4 / 10

User rating: 6.4 / 10

Rate this post

Click a number to rate this article.

Web Designer & Developer

Hello, I’m Mohit, is a PHP Developer and Web Designer skilled in PHP, HTML, CSS, JavaScript, MySQL, and WordPress. He creates responsive, modern, and user-friendly websites with a focus on clean UI/UX design.

Conclusion

Web Designer & Developer

Related Posts