Colorful bar loader using CSS Effect

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


Demo Download

AuthorComehope
CreatedSEPTEMBER 14, 2018
LicenseOpen
Compatible browsersChrome, 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

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *