How to use CSS, D3 and GSAP to implement horizontal bar loader (source code attached)

The content of this article is about how to use CSS, D3 and GSAP to implement horizontal bar loader (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

Source code download

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

Code interpretation

Define dom, the container contains 1 span element:

<div>
    <span></span>
</div>

Centered display:

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

Define the container size:

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

Set the style of span in the container, which is a colorful slender bar:

.loader {
    position: relative;
}

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

Introduce d3.js:

<script></script>

Delete the span element in the dom and create it using d3 instead. The constant COUNT is the number of slender strips, because the data generated by d3.range() It is a sequence starting from 0, so the data is corrected to a sequence starting from 1 according to daily habits:

const COUNT = 1;

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

Delete the span element background-color## set in the css # For the attribute code, use d3 settings instead:

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

Change the number of slender bars to 2, and change the color to dynamic generation:

const HUE_DEG = 12;
const COUNT = 2;

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

Go further, change the color to colored bars and black bars appear at intervals. Please note that although the value of hue in the expression is incremented by 12, the actual effect seen is that the hue difference between the colored bars is 24, because there are long black bars mixed in:

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

At this time, the dynamically generated dom structure is:

<p>
    <span></span>
    <span>
</span></p>

Introduce the gsap library:

<script></script>

Add the animation effect of the strip extending from the center to both sides:

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

Finally, change the number of strips to 30, which is obtained by dividing the 360 ​​degrees of the entire hue circle by the hue interval:

const COUNT = 360 / HUE_DEG;

You're done!

Related recommendations:

How to use pure CSS to implement the button effect of moving right when hovering (source code attached)

How to use CSS and GSAP to implement it Continuous animation with multiple keyframes (source code attached)

The above is the detailed content of How to use CSS, D3 and GSAP to implement horizontal bar loader (source code attached). For more information, please follow other related articles on the PHP Chinese website!