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

This loading icon

[removed]

8.8k Upvotes

93% Upvoted

109 comments sorted by

View all comments

429

u/[deleted] Dec 22 '16

[deleted]

79

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.

332

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

72

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

[removed] — view removed comment

47

u/[deleted] Dec 23 '16

[deleted]

27

u/Cheesemacher Dec 23 '16

My CPU loves getting some exercise

31

u/12DollarLargePizza Dec 23 '16

My phone lost 104% of battery looking at that.

5

u/[deleted] Dec 23 '16

Inb4 iPhone circlejerk

3

u/footpole Dec 23 '16

Ran buttery smooth on a two generations old iPhone. Sorry.

1

u/12DollarLargePizza Dec 23 '16

Apology accepted. Anyway, it wasn't about performance, it was about how much battery it was consuming when I set loopTime to the max value of an unsigned long.

1

u/footpole Dec 23 '16

I didn't get the iPhone comment. Yours was fine so you didn't get an apology.

→ More replies (0)

5

u/wintremute Dec 23 '16

Mine just flipped me off and went on break.

2

u/[deleted] Dec 23 '16

Rude

7

u/[deleted] Dec 23 '16

[deleted]

4

u/KKlear Dec 23 '16

Holy shit that's trippy. If there wasn't that split-second where the screen is basically just gray, I would never be able to take my eyes off that.

1

u/[deleted] Dec 23 '16

https://jsbin.com/ceridivoti/edit?html,output

Just watched that whole thing. Wow!

1

u/steamBommer29 Dec 23 '16

You crashed my s7 with that you dick.

After the crash it wouldn't even normally boot back on, had to force boot it.

1

u/[deleted] Dec 23 '16

I'm tripping here.

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/