CSS Tip #22 - Bouncing Ball Loader #shorts

Key Takeaways

there's a little CSS technique to build a bouncing ball loader like this so first of all we have a Divinity HTML with a class of Bounce this diff will be the bouncing ball loader in the CSS we target the bounce class and we apply a width and height of 20 pixels each the margin is zero at up and bottom and also left and right so it horizontally aligns in the middle in the browser next gives the ball the background of this blue color and a border radius of 50 so that it looks like a small blue ball in shape not a square so now we just need to make the animation of the ball now I'm just going to paste that in right here so it's called Bounce and it's really really simple all we say is go from a position where the y coordinate is zero so at the bottom in its original position and animate to a y position of minus 100 pixels so in the upwards Direction so this animation is only for the upwards Direction but that's okay because we can alternate the animation so the ball goes in the opposite direction as well and we'll do that shortly so now we can apply this animation to the bounce CSS rule right here so we say the animation is Bounce which we just made a duration of 0. five seconds so very quick the easing function is generated using this cubic bezier function which I made online there's loads of bezier function generators out there if you want to search Google for them but this one simulates a bars movements under Gravity so it slows down as it gets higher finally we want this animation to repeat so we say infinite and also specify alternate to say run the animation in the opposite direction or the alternate Direction when it's finished so the ball animates up then back down then back up then back down and so forth and that's pretty much it so now in the browser we can see that bouncing ball lowered it in all its Glory awesome