Colorful bar loader

colorful-bar-loader.markdown

Colorful bar loader

Watch interactive video on Scrimba: https://scrimba.com/p/pEgDAM/cVB48Ur

A Pen by Comehope on CodePen.

License.

index.html

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

script.js

const COUNT = 360 / 12;

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

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.css

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;
}