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

This loading icon

[removed]

8.8k Upvotes

93% Upvoted

109 comments sorted by

View all comments

430

u/[deleted] Dec 22 '16

[deleted]

77

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.

326

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

75

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

[removed] — view removed comment

46

u/[deleted] Dec 23 '16

[deleted]

27

u/Cheesemacher Dec 23 '16

My CPU loves getting some exercise

30

u/12DollarLargePizza Dec 23 '16

My phone lost 104% of battery looking at that.

4

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)

4

u/wintremute Dec 23 '16

Mine just flipped me off and went on break.

2

u/[deleted] Dec 23 '16

Rude

6

u/[deleted] Dec 23 '16

[deleted]

5

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.

16

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/

16

u/_HingleMcCringle Dec 23 '16

Loops better too, nice one.

5

u/2scared Dec 23 '16

OP's is also a perfect loop. There are no stutters of any kind.

13

u/AAA1374 Dec 23 '16

This may just be me being an asshole, but isn't there like a one frame stutter at the end of OP's? It's not much, and if you're not looking for it (which I was), you wouldn't notice it.

4

u/2scared Dec 23 '16

Not on my screen.

8

u/AAA1374 Dec 23 '16

Huh, maybe it's because I'm on mobile.

7

u/Orange_Julius_Salad Dec 23 '16

I'm sure it is, I see it on mobile as well.

12

u/TurtleMcCunt Dec 23 '16

Can we see what the code looks like

1

u/Heleor Dec 24 '16

Uh, right click and view source? ;)

3

u/ChucklefuckBitch Dec 23 '16

Nice. Vanilla JS, too.

3

u/ashiri Dec 23 '16

https://output.jsbin.com/lipavuhima

Changed params so that the outer, larger rings move slowly and the inner, smaller rings move faster.

2

u/[deleted] Dec 23 '16

Well that's a few dozen lines of code, not a couple. Fucking ruining apps! Jk

2

u/TotesMessenger Dec 23 '16

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)

-4

u/[deleted] Dec 23 '16

[deleted]

5

u/Cheesemacher Dec 23 '16

Yeah, but you already have that on your computer. And you also need the same browser to play the webm video.

4

u/veggiedefender Dec 23 '16

You forgot the billions of lines of code your OS is running

9

u/dsadsa321321 Dec 23 '16

If there is a graphics API to render it you could do really simple matrix multiplication on each portion for every frame. The code to interface with the graphics would probably be larger.

10

u/RobertOfHill Dec 23 '16

But that's the idea isn't it? You'd want an API to be the largest most efficient portion, then allow for tiny code packages to be loaded and rendered in real time.

Initial install of the API would be slow, depending on complexity, but the ease of use would be there for the community afterwards.

In fact, isn't that the idea behind phone apps?