<!DOCTYPE html>

<html>
    <head>
        <title>Glowing loading Animation</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class=" loader"></div>
    </body>
</html>



*
{
    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: 350px;
    height: 15px;
    background: white;
    -webkit-box-reflect: below 2px linear-gradient(transparent,#0005);
}
.loader::before
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fff,#fb0094,#0000ff,#00ff00,#ffff00,#ff73,rgb(255, 8, 8),#fb0094,#0000ff,#00ff00,#ffff00,#ff73);
    animation: animate 25s linear infinite;
    background-size: 500%;
}
.loader::after
{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,#fff,#fb0094,#0000ff,#00ff00,#ffff00,#ff73,rgb(255, 8, 8),#fb0094,#0000ff,#00ff00,#ffff00,#ff73);
    animation: animate 25s linear infinite;
    background-size: 500%;
    filter: blur(1px);
}
@keyframes animate
{
    0%
    {
        background-position: 0 0;
    }
    0%
    {
        background-position: 500% 0;
    }
}