Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Colorful bar loader
<div class="loader"></div>
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)
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.