Colorful bar loader using CSS Effect

Colorful loading animation bar developed using CSS Effects and JavaScript. Demo and Download options available.

HTML Snippet

<div class="loader"></div>

CSS Code

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.loader {
    width: 40em;
    height: 1em;
    font-size: 10px;
    position: relative;
}

.loader span {
    position: absolute;
    width: inherit;
    height: inherit;
}

JavaScript

const HUE_DEG = 12;
const COUNT = 360 / HUE_DEG;

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')
    .style('background-color', (d) => d % 2 === 1
        ? `hsl(${d * HUE_DEG}, 100%, 65%)`
        : 'black');

let animation = new TimelineMax({repeat: -1});
animation.staggerFrom('.loader span', 0.5, {scaleX: 0}, 0.4);

Preview