Front-end daily combat: # 136 video demonstrates how to use D3 and GSAP create a bar loader

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/pOZKWJ

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cVB48Ur

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

Defined dom, comprising a container spanelements:

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

Centered:

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

Is defined container sizes:

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

Set container spanstyle, color is a elongated strip:

.loader {
    position: relative;
}

.loader span {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: hsl(24, 100%, 65%);
}

Introduced d3.js:

<script src="https://d3js.org/d3.v5.min.js"></script>

Deleted dom of spanelements, switch to create d3, where the constant COUNTis the number of long and thin, because the d3.range()data generated from the number of columns is zero, so the correction data for the everyday habits from the beginning of the series:

const COUNT = 1;

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')

Set in css delete spanan element background-colorattribute code, instead d3 settings:

d3.select('.loader')
    .selectAll('span')
    .data(d3.range(COUNT).map(d => d + 1))
    .enter()
    .append('span')
    .style('background-color', `hsl(24, 100%, 65%)`)

The number of elongated strip to 2, color to dynamically generate:

const HUE_DEG = 12;
const COUNT = 2;

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => `hsl(${d * HUE_DEG}, 100%, 65%)`)

Further, changing the color to the color bars and black bars interval, please note that although in the expression of the value of hue is incremented by 12, but actually see the effect of hue difference between the color strip 24, because inclusion black strip:

d3.select('.loader')
    /* ...略 */
    .style('background-color', (d) => d % 2 !== 0
        ? `hsl(${d * HUE_DEG}, 100%, 65%)`
        : 'black');

At this time, dynamically generated dom structure:

<div class="container">
    <span style="background-color: rgb(255, 77, 77);"></span>
    <span style="background-color: black;">
</div>

Introducing gsap library:

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

Increase long extending from the center to both sides animation:

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

Finally, the number of strips to 30, which is divided by the full circle of 360 degrees hue interval obtained hue circle:

const COUNT = 360 / HUE_DEG;

We're done!