Colorful bar loader using CSS Effect

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

Demo Download

Author Comehope

Created SEPTEMBER 14, 2018

License Open

Compatible browsers Chrome, Firefox, Safari

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