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%)`)

const HUE_DEG = 12;
const COUNT = 2;

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

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

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

<script></script>

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

const COUNT = 360 / HUE_DEG;

How to use pure CSS to implement the button effect of moving right when hovering (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!