Colorful bar loader using CSS Effect

By | September 25, 2018

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

Colorful bar loader using CSS Effect 1