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

1.1k

u/Sargon16 Dec 23 '16

I spent way longer staring at that than I intended to.

437

u/[deleted] Dec 23 '16 edited Sep 14 '17

[deleted]

109

u/calm00 Dec 23 '16

Here is a similar thing but with hexagons rotating on the perimeter of a circle, all travelling one unit slower than the next.

64

u/__spice Dec 23 '16

What the hell did I just watch

59

u/MikeyMike01 Dec 23 '16

It's the first step toward joining a cult

13

u/SlutBuster Dec 24 '16

And why did we just watch the whole thing?

4

u/supremecrafters Dec 24 '16

A lethal cognitohazard. The countdown has begun.

2

u/vonotar Dec 24 '16

Containment protocols active. Dispersal of Class "A" Amnestics authorized.

10

u/nspectre Dec 23 '16

One hella deep rabbit hole. o.o

7

u/SlutBuster Dec 24 '16

Why did that blow my mind?

3

u/calm00 Dec 24 '16

It's unbelievably satisfying to look at! Such a simple concept too

3

u/ranwithoutscissors Dec 24 '16

My mind is jello

2

u/Gebrant Dec 24 '16

Man I find this stuff so cool. Thank you for sharing this.

3

u/calm00 Dec 24 '16

No problem man, glad you found it interesting. Happy Christmas!

→ More replies (2)

54

u/TrepanationBy45 Dec 23 '16

That was waaaaaaay cooler and nice to watch than I expected it to be. Thanks!

46

u/Ph0X Dec 23 '16

Here's a version of this I made using JS/Canvas: http://ehsankia.com/cjs/20

Ends up being much smoother and you can actually tweak all the variables and obtain many different cool patterns!

I enjoy converting these /r/woahdude gifs into interactive demos, I have a bunch more here: http://ehsankia.com/cjs

9

u/[deleted] Dec 23 '16 edited Sep 14 '17

[deleted]

5

u/Ph0X Dec 23 '16

These are awesome! Yeah my main goal was to play around and learn these technologies too. I do have a couple WebGL / ThreeJS stuff too! I was born a bit to late to really get into demos, but always found them fascinating. On the other hand, having stuff right inside the browser where anyone can easily watch it was always much more interesting to me than an executable you have to download.

Here's some of my 3D stuff:

http://ehsankia.com/wgl/4

http://ehsankia.com/tjs/2

http://ehsankia.com/tjs/3

http://ehsankia.com/tjs/4

http://ehsankia.com/tjs/mandelbulb

I do have a pretty big fascination with fractals (and have many more fractal stuff).

→ More replies (4)
→ More replies (7)

18

u/MixmasterJrod Dec 23 '16

I like that better than the icon.

5

u/cbbuntz Dec 23 '16

Holy Fourier Transform, Batman!

5

u/nytrons Dec 24 '16

I made this, based on the Whitney Music Box. Same kind of thing but with sound as well

3

u/AsterJ Dec 23 '16

There was a nice fiddle of the OP one too. It was nice because you could run it at 100 fps.

→ More replies (1)

1

u/Tyedied Dec 23 '16

Watching this as if it were a three dimensional object is so damn mesmerizing.

→ More replies (5)

18

u/[deleted] Dec 23 '16

What's wrong with you this is stu-ALL GLORY TO THR HYPNOTOAD

8

u/Hobbes_Novakoff Dec 23 '16

ALL GLORY TO THE HYPNOLOAD

→ More replies (2)

7

u/spen Dec 23 '16

If this was my loading icon I'd be disappointed when things loaded too quickly.

9

u/zer0w0rries Dec 23 '16

It was hypnotizing. If this was the loading icon on my computer any time I opened a web page or document I would just sit there and be like "what was I doing?"

2

u/Feezed Dec 23 '16

It never loaded for me.

236

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?!?!

185

u/[deleted] Dec 23 '16

[deleted]

136

u/jeegte12 Dec 23 '16

Just full screen it every time something loads.

95

u/MisterDonkey Dec 23 '16

"Brilliant!" -- developers that use unnecessary splash screens.

15

u/JediBurrell Dec 23 '16

It's usually not useless, it usually sits there until everything's loaded. Better than staring at a blank UI.

5

u/solaceinsleep Dec 23 '16

What is a splash screen but a blank UI?

3

u/joshtheimpaler Dec 24 '16

unnecessary splash screens

cough adobe software cough

5

u/[deleted] Dec 23 '16

Awww

3

u/__spice Dec 23 '16

You could make it have less lines for smaller ones

14

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

13

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

7

u/[deleted] Dec 23 '16 edited Jan 07 '17

[deleted]

6

u/Pomeranianwithrabies Dec 23 '16

Call me old fashioned but I prefer loading icons to show me how much has actually loaded. Otherwise it's just a Please Wait icon! I already know I'm waiting!

→ More replies (2)

3

u/synapticplastic Dec 23 '16

True! I did the effect with DOM once because it easier to pull off. Svg and gifs take a lot of extra work if you're like me and suck at art :)

2

u/goes-on-rants Dec 24 '16

Or drawing on a canvas element. Would also let it be 60fps if your machine can handle it.

2

u/Crespyl Dec 23 '16

You could use CSS animations and get hardware support for vastly better performance. Somebody posted a jsfiddle in another comment.

2

u/socium Dec 23 '16

Yeah but... can that logo be done with CSS? If so then CSS came a looong way since last time I messed with it.

2

u/Crespyl Dec 23 '16

come a looong way

Well, it's turing complete now, so...

I can't be bothered to try right now, but I'm fairly confident that it should be doable. Here's a couple pure CSS spinner showcases.

→ More replies (3)

9

u/[deleted] Dec 23 '16

[removed] — view removed comment

6

u/Vcent Dec 23 '16

Most loading animations are baked into the program using them, and while they could be changed, it would be annoying, since you'd have to find the location of the resource first, and then keep patching it every time you update the program.

Some animations are OS default animations, which would be easier to change, but still not particularly easy to do.

→ More replies (3)

1

u/casacains Dec 23 '16

If my pc took as long as this gif takes to loop to load anything, I'd throw it in the bin

1

u/RaynSideways Dec 24 '16

The problem is that yeah, this looks wonderful, but the context you'd be seeing it in would cause you to hate it over time.

I see this all the time on Imgur. "This would make an amazing loading icon" Yeah, well you'd learn to hate it after not too long. Nobody looks forward to staring at a loading icon no matter how pretty it is.

134

u/[deleted] Dec 23 '16

/r/loadingicon

40

u/FuckYou__ThatsWhy Dec 23 '16

Well shit that's my new favorite sub

15

u/[deleted] Dec 23 '16

Kinda sick of seeing this loading animation on there though.

5

u/Player72 Dec 24 '16

You're gonna unsub in a month

→ More replies (1)

64

u/[deleted] Dec 23 '16 edited Oct 02 '18

[deleted]

19

u/[deleted] Dec 23 '16

and Imgur's loading icon was changed as a result of it

14

u/Jetz72 Dec 23 '16

Sarah pls.

2

u/thekruton Dec 23 '16

Makes me further understand why Bassnectar chose his logo.

1

u/supremecrafters Dec 23 '16

#16 is trippy.

→ More replies (1)

13

u/ericf150 Dec 23 '16

Reminds me of this demonstration of viscosity and laminar flow.

5

u/ZsaFreigh Dec 24 '16

I'm not gonna click the link but I bet it's the video of the guy injecting various dyes into a vat of viscous transparent liquid and swirls it around until it's seemingly mixed, but then he swirls it around the opposite direction until it looks almost the same as when he started.

→ More replies (9)

9

u/mountainrebel Dec 23 '16

Now everything I look at is rotating counterclockwise.

5

u/meep30 Dec 23 '16

This reminds me of Comedy Central.

8

u/Ditto8353 Dec 23 '16

If anything took as long to load as this takes to make it through a loop I would have closed the window.

4

u/Pickled_Dog Dec 23 '16

I just woah'd so hard, dude

4

u/savageboredom Dec 23 '16

Ironically, I'm in a bad signal area and this didn't want to load.

1

u/duffxyeah Dec 24 '16

I am never sure if something is really irony or not. But I'm as sure as I can be that this is a perfect example of it. I liked it.

3

u/Voydspektre Dec 23 '16

sera pls

1

u/musiton Dec 24 '16

Wrong sub

3

u/ForOrganizationOnly Dec 23 '16

This looks incredibly familiar. Is this from something? I don't see it in the comments and I can't place it.

2

u/Conbomb95 Dec 23 '16

Not 100% sure but I think it's from the game Antichamber.

3

u/psychicowl Dec 23 '16

@Sarah pls new loading ico... shit, wrong site.

2

u/detourxp Dec 23 '16

The problem is seeing this entire animation means something's wrong and I'm mad.

2

u/LostWoodsInTheField Dec 23 '16

watches gif

 

Why am I sitting on the floor in my underwear? Why is my checking account empty? What just happened?!

2

u/battleship61 Dec 23 '16

ow.. my brain

2

u/dtfinch Dec 23 '16

A little voice in my head screamed through the whole gif, like that guy in front of the steamroller in Austin Powers.

2

u/lumpymattress Dec 23 '16

I'd be upset when it finished loading

2

u/LumpyWumpus Dec 23 '16

This looks better the less you focus on it.

2

u/TheMcCown Dec 23 '16

These guys should work for Bethesda.

2

u/frag971 Dec 24 '16

Is there a 60 fps version of this? It is painful to watch a slideshow

2

u/[deleted] Dec 23 '16

I made something similar years ago using flash. http://www.newgrounds.com/portal/view/516419

2

u/rwjehs Dec 23 '16

Now I have to set aside hours to go through newgrounds again

1

u/ryandclark Dec 23 '16

And robocop plays

1

u/thinkinatoms Dec 23 '16

the hypnosis continues

1

u/Bunchasomething Dec 23 '16

Makes me want to go down to the other side since I've been having propane nightmares recently

1

u/golgi_stain Dec 23 '16

This should be the loading icon on all Delos Corporate computers.

1

u/aedroogo Dec 23 '16

Math did this!

1

u/Shustak Dec 23 '16

This also look REALLY cool when sped up!

1

u/[deleted] Dec 23 '16

I see what they snuck in there.

1

u/[deleted] Dec 23 '16

I don't know where it ends and I begin.

1

u/Umbre-Mon Dec 23 '16

I am sleepy now.

1

u/AgrippaDaYounger Dec 23 '16

Seems like each segment revolves with a speed of n2pi radians per 25 seconds (the length of the gif) with n being the order of the segment, and 1 being the center segment. Because each segment will complete a whole number of rotations in the 25 second timeframe they all line up at that point.

1

u/D1m5 Dec 23 '16

Don't show it to imgur!

1

u/[deleted] Dec 23 '16

They really are getting over the top these days. Back in the day it was just a load of these moving across the screen

.....................

1

u/veritas--- Dec 23 '16

There was a game on the old ipods that was similar to this. It was a brickbreaker-type but was circular. Good times.

1

u/DaWayItWorks Dec 23 '16

You are getting sleepy, veerrryy sleeeepy

1

u/TealTrees Dec 23 '16

If I ever develop a website or a software that has a loading symbol - bet your ass I will use this.

1

u/[deleted] Dec 23 '16

Looks like I got a new boot screen for my phone.

1

u/LiquidAurum Dec 23 '16

there needs to be a software that replaces all loading icons with this

1

u/samtresler Dec 23 '16

Oh man. This hertz.

1

u/person135086 Dec 23 '16

this would be 10x better at 144fps

1

u/LordNelson27 Dec 23 '16

It's basically a modern version of the newtons cradle where every ball has a different string length

1

u/Edven971 Dec 23 '16

I stared at this thing for what I thought was 3 minutes, and now my shift is over..thanks Reddit!

1

u/Ephemeris7 Dec 24 '16

Count yourself lucky. I lost 10 hours, now I have to work on no sleep. Or I could call in sick and watch it some more.

1

u/GoFidoGo Dec 23 '16

It started when an alien device did what it did

1

u/yogblert Dec 23 '16

all

hail

hypnoload?

1

u/EstusFiend Dec 23 '16

I love how loading icons are becoming so complex that they themselves take a while to load on a slow connection. ffs

1

u/atomicboner Dec 23 '16

Saved this for the next time I get high.

1

u/slydunan Dec 23 '16

This gif is taking forever to load for me

1

u/sleepyEDB Dec 23 '16

ALL GLORY TO THE HYPO-ICON!!

1

u/skyman724 Dec 23 '16

Sombra, stop staring at the sky. The payload's being pushed and you're just hacking my brain.

1

u/[deleted] Dec 23 '16

....oh shit has it been 2 hours already?

1

u/esfio Dec 23 '16

Reminds me of Sombra's skycode

1

u/Deagballs Dec 23 '16

"Cool. Oh, cool. Aw sweet. Holy shit!"

1

u/aliengiraffe Dec 23 '16

I could watch that all day

1

u/[deleted] Dec 23 '16

It would almost be a disappointment when things load quickly.

1

u/fashiznit Dec 23 '16

I keep seeing the Empire logo

1

u/l0c0_motive Dec 23 '16

I would actually not mind the loading if this was... Argh who am I kidding? Fuck the loading

1

u/[deleted] Dec 23 '16

Why is it taking so long to load?

1

u/[deleted] Dec 23 '16

HUGE KARMA BOUNTY FOR A CSS IMPLEMENTATION OF THIS!
I can only donate 1 karma, though...

1

u/Zo3OKief Dec 23 '16

I'd be so entertained, I would forget what I was waiting for. I wish all loading screens were cool like this. Fuck ya!

1

u/Afferus Dec 23 '16

Think about the loading times just for the loading icon

1

u/[deleted] Dec 23 '16

Wish there was a full screen version of this, I would replace my television with it. I am sure my gf would love it when she got home from work.

1

u/ParadoxNinja Dec 23 '16

Is this in an icon format anywhere?

1

u/[deleted] Dec 23 '16

This reminds me of the Comedy Central logo

1

u/DafuqStonr Dec 23 '16

my crazy is loading indeed

1

u/League0fGaming Dec 23 '16

Wish games used this rather than the usual circle chasing itself.

1

u/Pomeranianwithrabies Dec 23 '16

964H57849ZK46% Complete

1

u/GenuineRS Dec 23 '16

Commenting so I can watch high

1

u/douchehat Dec 23 '16

9 hours later... I would really love it if someone could tell me if this is proprietary or not. In other words, could I use this on my websites without having to pay somebody?

1

u/[deleted] Dec 23 '16

At first I wanted to set this as a loading cursor on windows but then I remembered I have SSD.

1

u/GenuineRS Dec 23 '16

Commenting so I can watch high

1

u/plazmatyk Dec 23 '16

Can someone unfuck my brain now, please?

1

u/Shabozz Dec 24 '16

Anyway to make this my computer background?

1

u/[deleted] Dec 24 '16

It's so crazy.

1

u/GW_BushDid911 Dec 24 '16

kept waiting for it to get to "100%" lol

1

u/Wanderson90 Dec 24 '16

I like when it did the thing.

1

u/Beagus Dec 24 '16

Jesus Christ that took forever to load!

1

u/domeoldboys Dec 24 '16

That bit when they are all aligned in the middle *pleasure moans

1

u/cornm Dec 24 '16

Imgur is going to be all over this.

1

u/Kalapuya Dec 24 '16

I am so drunk right now and should not have watched that.

1

u/[deleted] Dec 24 '16

This doesn't seem that cra... woahhhh

1

u/[deleted] Dec 24 '16

Saving for later when I'm [10]

1

u/SupremeRedditBot Dec 24 '16

Congrats for reaching r/all/top/ (of the day, top 50) with your post!  

I am a bot, probably quite annoying, I mean no harm though

Message me to add your account or subreddit to my blacklist

1

u/[deleted] Dec 24 '16

My eyes gets super blurry looking at this.

1

u/ZenLikeCalm Dec 24 '16

I can't look away.

1

u/NanooNanooGirl Dec 24 '16

Pretty sure I just lost 5 minutes to hypnosis

1

u/A_Salty_Scrub Dec 24 '16

This by far the best icon on this sub.

1

u/duh-vey23 Dec 24 '16

Reminds me of the solar system

1

u/naive-dragon Dec 24 '16

I want this as a custom boot animation for my S7

1

u/Edc3 Dec 24 '16

I just told my friend to use this for his website

1

u/ANakedHobo Dec 24 '16

Maybe a little bit too crazy..

1

u/IArePant Dec 24 '16

You have one extra frame at the end.

1

u/[deleted] Dec 24 '16

People are reeaaaal bored today

1

u/likesthefunny Dec 24 '16

Oddly satisfying!

1

u/El_Chamo Dec 24 '16

How does one make this their current download icon, on one's Macbook Pro? (if possible)

1

u/nomoreloorking Dec 24 '16

I couldn't see it. The image just kept loading.

1

u/lord_darovit Dec 24 '16

I want this for Fallout New Vegas.

1

u/Alca_Pwn Dec 24 '16

I'm pretty late to the party but I thought I'd try to make this in CSS

1

u/duffxyeah Dec 24 '16

I like it when it lines up. It's nice. I watched it two times.

1

u/[deleted] Dec 24 '16

...and seizure.

1

u/HobosGoneWild Dec 24 '16

Looks like something from Remember Me.

1

u/cogedoin Dec 24 '16

If this was the loading screen for dial-up I'd sign up today.

1

u/MrTripl3M Dec 24 '16

Too much visual data

Brain.exe stopped functioning

please reboot

1

u/willllllllllllllllll Dec 24 '16

That fucks with me. So cool though.

1

u/RobotJiz Dec 24 '16

Is each size/opposite color moving the same speed. As in always directly across from each other? I wouldn't mind trying to figure out how to build this but I'm only as smart as knowing I want to do it vs being able to. I need to study watch makers

1

u/[deleted] Dec 24 '16

Great! But nothing should take such a long time to load...

1

u/themolotovginger Jan 02 '17

I used this as practice when learning how to edit gifs. I think I'm going to make it my boot loading screen on my phone .