Stylish Circle Animation Loader using HTML and CSS

Rayen

Make your website visually engaging and dynamic by incorporating a sleek circle animation loader. In this tutorial, we'll guide you through the creation of a captivating loading animation using HTML and CSS. Elevate your user experience with this modern and stylish loader that not only indicates progress but also adds a touch of creativity to your website.




Step 1: HTML Markup:

Start by setting up the HTML structure for your circle animation loader. Keep it simple and intuitive, focusing on a container element for the loader. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Cercle Loader</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="cercle1">
            <div class="cercle2">
                <div class="cercle3">
                    <div class="cercle4">
                        <div class="cercle5">
                            <div class="cercle6"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Step 2: Styling with CSS:

Create a dedicated CSS file (style.css) to style the circle loader. Leverage CSS animations to achieve a smooth and visually appealing loading effect. 
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #101010;
}

:root {
    --border: 1px solid red;
}

.container {
    width: 200px;
    aspect-ratio: 1;
    position: relative;
}

.container div {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 0 0 3px hsl(270, 86%, var(--color));
    display: flex;
    justify-content: center;
    animation: anime 8s linear infinite;
}

@keyframes anime {
    100% {
        transform: rotate(-360deg);
    }
}

.container .cercle1 {
    width: 100%;
    --color: 30%;
}

.container .cercle2 {
    width: 50%;
    --color: 40%;
}

.container .cercle3 {
    width: 150%;
    --color: 50%;
}

.container .cercle4 {
    width: 50%;
    --color: 60%;
}

.container .cercle5 {
    width: 65%;
    --color: 70%;
}

.container .cercle6 {
    width: 50%;
    --color: 80%;
}

Understand the key components of the CSS styling. The border properties create the circular shape, and the @keyframes rule defines the rotation animation. Adjust the size, colors, and animation duration to fit your design preferences.


Personalize your circle loader by experimenting with different colors, sizes, and animation speeds. Consider incorporating the loader into various sections of your website, such as during content loading or form submissions.

0 Comments