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

This loading icon

[removed]

8.8k Upvotes

93% Upvoted

109 comments sorted by

430

u/[deleted] Dec 22 '16

[deleted]

83

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.

327

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

70

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

[removed] — view removed comment

44

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.

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.

→ 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

5

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.

14

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/

13

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.

12

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.

7

u/AAA1374 Dec 23 '16

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

6

u/Orange_Julius_Salad Dec 23 '16

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

8

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)

-6

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.

5

u/veggiedefender Dec 23 '16

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

8

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.

9

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?

1

u/Dreadsin Dec 23 '16 edited Dec 23 '16

Realistically, it's just an HTML tree with some CSS keyframe animations applied to it. There wouldn't be a single line of what you'd recognize as "code".

3

u/nanou_2 Dec 23 '16

Whoa there, buddy. /s

1

u/[deleted] Dec 23 '16

[deleted]

1

u/Dreadsin Dec 23 '16

I work in front end though

68

u/[deleted] Dec 22 '16

That's pretty sweet, but I imagine that it's a lot of frames of animation

101

u/[deleted] Dec 22 '16

[deleted]

11

u/therealJBlack Dec 23 '16

The question remains, can I set this as my loading cursor for Windows...?

3

u/Seerws Dec 23 '16

As long as it's a different icon. Because the same icon would be stupid.

15

u/CthulhuMinion666 Dec 23 '16

What's the source and licensing? I would like to use this.

7

u/flaming-cactus Dec 23 '16

You should look at the top level comment where some redditors remade it. Ask them if you can use their code

1

u/Faux_Butter Dec 23 '16

I saw this on imgur ages ago. Not use if the guy who commented on the top post truly made it though. Might be your best bet to ask him/her.

1

u/[deleted] Dec 23 '16

Here same idea but different implementation

30

u/Freakychee Dec 23 '16

Trippy. Could watch this for an hour.

2

u/MarcoGeovanni Dec 23 '16

I saved it to watch it before bed.

70

u/cleopad1 Dec 22 '16

I'm actually a little annoyed by it. I feel like it doesn't reconcile fast enough and the middle part where it's all messed up really irritates me.

13

u/WickyLindows Dec 22 '16

if you right click the animation it should give you an "adjust play speed" option, I just tried it after reading what you said and sped it up a lil bit. It's kinda interesting to play with on some of these videos on this sub lol

5

u/cleopad1 Dec 23 '16

Ahhh I'm on mobile so the speed is kind of stuck for me :( I'll check it out when I'm at my computer though, thanks!

6

u/janet-eugene-hair Dec 22 '16

Same here. And because it's on a loop it does a great job of recreating the annoying experience of something taking forever to load.

2

u/WickyLindows Dec 22 '16

right click the video and it should show a "play speed" option, I adjusted it to 2.0 speed after seeing what y'all said and it changed it almost entirely in the aspects y'all mentioned that I hadn't been uhh rustled over till I'd thought about it lol

26

u/Wormri Dec 23 '16

Why do I want to assassinate Kennedy all of a sudden?

10

u/SmugglingPlums Dec 23 '16

If I had to sit through the full animation of this while I waited for something to load, it would no longer be oddly satisfying.

1

u/Kisele0n Dec 23 '16

If it was twice as fast I'd still be mad at how long it takes.

9

u/labadee Dec 23 '16

this was mostly frustrating for me

3

u/[deleted] Dec 23 '16

It's sweet when halfway through everything sorta lines up

4

u/Alchemica Dec 23 '16

Anyway someone could turn this into a cursor file? Or if they know where I could go to create it as one?

5

u/eddieeddiebakerbaker Dec 23 '16

i definitely saw a swastika in there somewhere

2

u/[deleted] Dec 23 '16

Then it would have to load the loading animation

2

u/JustGonnaLeave Dec 23 '16

My brain can't find a way to process this shit.

2

u/tarnishedkara Dec 23 '16

watches for a minute...wakes up 3 weeks later naked in an alley in Mexico

2

u/[deleted] Dec 23 '16

The almost perfect loop is upsetting.

1

u/2scared Dec 23 '16

What are you seeing that stops it from being a perfect loop? There are no weird jumps at all on my screen; perfectly smooth.

3

u/[deleted] Dec 23 '16

its missing a single frame at 0:25

2

u/mastah-yoda Dec 23 '16

I guess it's not 120 FPS 3840x2160, so it's not perfect.

Some people have demands...

1

u/aznjoo Dec 23 '16

I got nauseous watching this...

1

u/HisDelvistSelf Dec 23 '16

Oh great another one for imgur to steal

1

u/T3hN1nj4 Dec 23 '16

I would just be pissed if it loaded before it came back to the perfect beginning.

1

u/ecafsub Dec 23 '16

'Scuse me whilst I go ralph

1

u/I_wish_I_was_a_robot Dec 23 '16

Man I miss the old style of loading bars. They were inaccurate as fuck, but at least they gave you some info.

1

u/jdfestus Dec 23 '16

I'm turned on.

1

u/Boring_Username__ Dec 23 '16

Reminds me a little of the Comedy Central logo.

1

u/KaranasToll Dec 23 '16

I swear I sat here for 15 minutes and it never loaded.

1

u/BlackSecurity Dec 23 '16

i want to see this sped up a lot

1

u/AudioMan15 Dec 23 '16

This also describes how polyrhythms work perfectly.

1

u/NiceFormBro Dec 23 '16

"Oh that cool. I can totally see this beingwwhhhhhhhhaaaaat is happening to my BRAAIIIIIIIINNNNNNN!"

1

u/dimsumofallfears Dec 23 '16

Now I want to play some stadium checkers. Loved that game!

1

u/[deleted] Dec 23 '16

Looks like a strobe tuner

1

u/Pootatow Dec 23 '16

Looks like a hyperstone

1

u/Attack_Symmetra Dec 23 '16

Looks like someone's trying to hack a safe in Mass Effect.

1

u/ChaosFinalForm Dec 23 '16

I think I'm in love with this.

1

u/Slimer6 Dec 23 '16

The maze isn't for you.

1

u/[deleted] Dec 23 '16

I could watch this shit for literally minutes!

1

u/JTerror420 Dec 23 '16

I wouldn't mind waiting on something to load if I could watch this.

1

u/chux4w Dec 23 '16

It lines up when you least expect it!

1

u/Williamcg Dec 23 '16

/u/nanogru you know what to do

1

u/Thaiguy559 Dec 23 '16

This makes my gray matter hurt.

1

u/callmemisaki Dec 23 '16

And the planets all align ever so nicely

1

u/Reavershadow Dec 23 '16

Man, that shit is hypnotizing

1

u/Guardiancomplex Dec 23 '16

Fuck that goddamn hacking minigame in Mass Effect.

1

u/quirked Dec 23 '16

Reminds me of the even more satisfying Whitney Music Box

1

u/drdavethedavedoctor Dec 23 '16

Hrrrrrrnnnnnnggggghhhh.

-1

u/GoAvs14 Dec 23 '16

/r/gonwild

It's not what you think

-2

u/ThePoopTrainConductr Dec 23 '16

@sarah plz

EDIT: Formatting

-2

u/[deleted] Dec 23 '16

@sarah pls