Getting there
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:
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).
