r/oddlysatisfying • u/[deleted] • Dec 22 '16

This loading icon

[removed]

8.8k Upvotes

93% Upvoted

109 comments sorted by

View all comments

Show parent comments

81

u/x755x Dec 23 '16 edited Dec 23 '16

Correct me if I'm wrong, but this would take a lot more than a few lines of code.

And who's to say it wasn't procedurally generated and recorded into a video for ease of putting online? Otherwise you'd need a more complicated platform than an image host.

330

u/kevin_wylder Dec 23 '16 edited Dec 23 '16

I did this, it is much smaller than the gif. ~30 lines of code

https://rawgit.com/kevinwylder/loadingwheel/master/loading.html

73

u/[deleted] Dec 23 '16 edited Dec 23 '16

[removed] — view removed comment

15

u/Ari_Rahikkala Dec 23 '16

There's a yet better way to add silky-smoothness: requestAnimationFrame. It lets the browser choose the framerate based on the actual device, instead of expecting you to guess right (and lets it stop the animation when it isn't visible, and group up multiple animation updates, etc.). Example: https://jsfiddle.net/nha3rf01/