Glowing gradient Loading Bar Animation Effects

Amazing Animated CSS Gradient Loading Bar

Preview

HTML Code:

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>INTERESTING Plus</title>
</head>
<body>
    <div class="loader">

    </div>

</body>
</html>

CSS Code:


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

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
.loader
{
    position: relative;
    width: 300px;
    height: 10px;
    background: #fff;
    -webkit-box-reflect: below 1px linear-gradient(transparent,#0005);
}
.loader::before
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094);
    animation: animate 20s linear infinite;
    background-size: 500%;
}

.loader::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094,#0000ff,#00ff00,#ffff00,#fb0094);
    animation: animate 20s linear infinite;
    background-size: 500%;
    filter: blur(20px);
}
@keyframes animate
{
    0%
    {
        background-position: 0 0;
    }
    0%
    {
        background-position: 500% 0;

    }
}

That’s all! I hope, you have successfully created CSS Glowing Gradient Loading Bar Animation Effects. If you have any questions or suggestions, let me know by comment below. Happy coding 😊

INTERESTING Code

Glowing Gradient Loading Bar Animation Effects With CSS

Glowing gradient Loading Bar Animation Effects

Preview

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

Glowing Gradient Loading Bar Animation Effects With CSS

Glowing gradient Loading Bar Animation Effects

Preview

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget