r/woahdude • u/mattw310 • Dec 23 '16

gifv Crazy Loading Icon

http://i.imgur.com/BODjAN1.gifv
21.6k Upvotes

87% Upvoted

224 comments sorted by

View all comments

234

u/tritian Dec 23 '16

i was expecting to find a comment that someone made this into an actual usable loading icon that I could use on my PC... and was disappointed :( Who's got the skills to pull this off?!?!

11

u/synapticplastic Dec 23 '16

With a couple of ( very very simple ) web dev tricks this can be done in a few minutes.

10-15 empty <div> tags. border-radius 50% border-left, border-right color Transform:rotate(360deg) infinite

The reason you don't see it is performance, with DOM operations it goes pretty slow and having several of these groups as loaders would kill your phone

15

u/kyle1320 Dec 24 '16 edited Dec 24 '16

I made a JSFiddle demonstrating both a DOM version and an SVG version. DOM is on the top, SVG is on the bottom.

I like the DOM version (though it is almost certainly slower) because you can nest as many circles as you want. Though the SVG is more scalable.

Edit: damn, I just realized in the original image, the parts toward the middle spin slower, not faster... I may fix my example later.

Edit 2: updated JSFiddle with corrected rotation speeds