Amazing CSS Loading Animations Effects HTML & CSS .

Loading animations are notifications that reassure users that the system is still handling their request. When a user clicks on a link or button, the animation is displayed until the load process is complete.

Add CSS Loading Animation to Site:

A CSS loading animation helps users be patient with website. It lets them know the system hasn't crashed, tells them how long a page will take to load, and maintains their attention by providing something to look at.

index.html

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >
<section>
        <div class="loader">
            <span style="--i:1;"></span>
            <span style="--i:2;"></span>
            <span style="--i:3;"></span>
            <span style="--i:4;"></span>
            <span style="--i:5;"></span>
            <span style="--i:6;"></span>
            <span style="--i:7;"></span>
            <span style="--i:8;"></span>
            <span style="--i:9;"></span>
            <span style="--i:10;"></span>
            <span style="--i:11;"></span>
            <span style="--i:12;"></span>
            <span style="--i:13;"></span>
            <span style="--i:14;"></span>
            <span style="--i:15;"></span>
            <span style="--i:16;"></span>
            <span style="--i:17;"></span>
            <span style="--i:18;"></span>
            <span style="--i:19;"></span>
            <span style="--i:20;"></span>
        </div>
    </section>

style.css

<!DOCTYPE html>
        
        <!-- Created By Sagar Developer -- >
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: purple;
    animation: animateBg 10s linear infinite;
}
@keyframes animateBg{

    0%
    {
        filter: hue-rotate(0deg);
    }
    100%
    {
        filter: hue-rotate(360deg);
    }

}
section .loader{
    position: relative;
    width: 120px;
    height: 120px;
}
section .loader span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(45deg * var(--i)));

}
section .loader span::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 50px;
    border-radius: 50%;
    background: #f3270d;
    box-shadow: 0 0 10px #f3280d,
    0 0 20px #f3280d,
    0 0 40px #f3280d,
    0 0 80px #f3280d,
    0 0 100px #f3280d;
    animation: animate 1.3s linear infinite;
    animation-delay: calc(0.1s * var(--i));
}
@keyframes animate
{
    0%
    {
        transform: scale(1);
    }
    80%,100%
    {
        transform: scale(0);
    }
}

Sagar Developer

Amazing Loading Animations Effects USING HTML & CSS .

Amazing CSS Loading Animations Effects HTML & CSS .

Add CSS Loading Animation to Site:

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Amazing Loading Animations Effects USING HTML & CSS .

Amazing CSS Loading Animations Effects HTML & CSS .

Add CSS Loading Animation to Site:

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form