For the longest time, I was looking to make a custom loading icon for one of my Bubble sites. My logo was a lighting bolt, and I wanted it to outline itself while the page was loading (like below):
Well, I figured I might not be the only one who wants something like this, so I decided to make a plugin that will convert any SVG shape into an outline loader just like this! There’s a handful of preset animation you can choose from. (You can even animate more complex shapes like the one below):
Not only will it animate outlines, but you can use it for regular SVG icons too!
You can check out the demo site to upload your own SVG and try it out. I’m itching to add more animations / features to this plugin too, so if you have any recommendations, I’d love to hear them!
Features
- Upload your own SVG shape to use as a loading icon.
- Add an animation stroke to your SVG shape
- Option to turn the animation into a fullscreen loader that displays when the page is loaded
- Automatically hide after a given amount of time
- Ending animations to animate the “hiding” of the icon
- Choose from a list of pre-designed animations that’s always growing (or suggest your own to have it added!)
- Customize animation, stroke, color, speed, and more.
Need to learn how to get yourself an SVG? Check out the documentation here
Documentation
https://devopanda.gitbook.io/svg-loader-progress-bar/
Demo
Editor
Plugin page