Pulsing badge?

We would like to start using badges to introduce new features (via guide pop-ups) in our app, and we like the idea of a pulsing icon -- kind of like the default alert Pendo uses for its Resource Center. Anyone got a quick trick or hack for how to accomplish this? We've tried animating a gif but it's pixelated and just not quite the quality we need. 



  • An animated gif is definitely the first thing that comes to mind. Is the issue that the gif looked pixelated from the get-go, or something else?

    Beyond that, maybe someone has some CSS tricks to share!

  • Yep - it's pixelated even outside of Pendo. Where you have to add the badge at the size you need since Pendo doesn't give you tools to adjust the size in-app (like it does for other images), we have to use a small one, and the animator says it's just too hard to get the smoothness we really need working with the small image. 

  • Hey Christina, our team designs animated pulsing badges using svg's, definitely the way to go.

  • Stevie G how do you get them to stop pulsating if you want them to continue to persist but less intrusively?

  • Eric Miller I guess it comes down to the size and overall design of the badge itself. Ours are big enough to notice, but small enough to not be too intrusive ;)

    But to answer your question, there is no way to stop them pulsating.

  • We also added a delay at the end of the first set of pulses to kind of make it less "in your face." And we ended up using a webp file, I believe. 


Please sign in to leave a comment.

Didn't find what you were looking for?

New post