Create Infinite Warm Cycle Loader with HTML CSS

Namaste!

Table of Contents

Infinite Warm Cycle Loader

In this tutorial of “Infinite Warm Cycle Loader”. I just created a container as circle-shaped then put some particles inside into it. Then, edited particles as I need and animated them with @keyframes syntax. I make them travel on an infinite sign path and delayed particles with animation-delay syntax.

I have to do this for all particles so I used :nth-child( )

Infinite Warm Cycle Loader YouTube Tutorial

Infinite Warm Cycle Loader Source Code

You can download source code for free from the below files –

.html file code

Put this code between <body> Your Code Here </body> tags

<div class="circle">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>

.css file code

Put this code between <style> Your Code Here </style> tags

html,
body {
    height: 100%;
}

body {
    background: #0d071a;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    width: 200px;
    height: 100px;
    transform: translateZ(0);
}

.particle {
    background: #ff6464;
    border-radius: 10px;
    position: absolute;
    margin-left: 90px;
    margin-top: 40px;
    width: 20px;
    height: 20px;
    animation: rotar_n1 3s linear infinite;
}

@keyframes rotar_n1 {
    0% {
        transform-origin: 50px;
    }
    50% {
        background: #6464ff;
        transform-origin: 50px;
        transform: rotateZ(360deg);
    }
    51% {
        transform-origin: -30px;
    }
    100% {
        transform-origin: -30px;
    }
}

.particle:nth-child(1) {
    background: #ffffc8;
    box-shadow: 0px -10px 80px #fff;
    border-radius: 100%;
    animation-delay: 5ms;
}

.particle:nth-child(2) {
    animation-delay: 50ms;
}

.particle:nth-child(3) {
    animation-delay: 100ms;
}

.particle:nth-child(4) {
    animation-delay: 150ms;
}

.particle:nth-child(5) {
    animation-delay: 200ms;
}

.particle:nth-child(6) {
    animation-delay: 250ms;
}

.particle:nth-child(7) {
    animation-delay: 300ms;
}

.particle:nth-child(8) {
    animation-delay: 350ms;
}

.particle:nth-child(9) {
    animation-delay: 400ms;
}

.particle:nth-child(10) {
    animation-delay: 450ms;
}

Thank You!