A series of wooden blocks stacked like stairs on an angle.
A series of wooden blocks stacked like stairs on an angle.
Photo by Volodymyr Hryshchenko on Unsplash

I’ve been having a lot of fun with the animation design challenges I’ve been doing over the last month, so I thought I’d try my hand at another one. This week I designed a “bouncy” progress bar.

I’ve been thinking a lot about design systems lately, so for this progress bar, I thought I’d make it part of the same visual language that I used for my last “loading” animation from a couple weeks back. Here’s what I came up with:

A blue gradient progress bar animation
A blue gradient progress bar animation

I decided to make this pretty minimalist, no percentages or anything. Creating the shape and gradient was easy, but getting the smoothness of the bar progressing was a bit more challenging. I played with a ton of options in Figma’s prototype settings, until it felt smooth enough and a little dynamic .

One thing that was an unintended consequence of playing with the settings was that I accidentally used the “Ease in and Back” transition for one frame. This makes the progress bar stutter backwards briefly, which I just found kind of weirdly charming and delightful. For something so straightforward, it felt like it suddenly was injected with a tiny shot of personality— so much so that I just left it as is.

I’m really loving creating these simple animations. I think I might even be starting to make some…progress (womp, womp).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store