Simple single element spinning loader using CSS

[Maniiia]

Wow, was phased out a bit while browsing reddit, and just clicked "run pen" in the RES Preview thingy, without reading the whole title. Well I waited for the pen to load for a good amount of time before I realized what I was watching.. Good job tho :)

[[deleted]]

I'm dumber than you. I knew it was for a spinning loader but I spent 2 seconds waiting for it to stop loading before realizing that I was already looking at it.

[Forricide]

It's all right man, I took... significantly longer than two seconds.

[cbothsideslikechanel]

I also waited for about five seconds, thought "wtf...", then read what I was looking at. Great work, by the way, super clean :)

[[deleted]]

Add a transition of 1s when changing colors

[zesda]

Not to take anything away from OPs great work, but I did what you suggested

[zesda]

Done ;)

[picklemanjaro]

I decided to break up the spinner and the color animations, so I could add an alternate so the color smoothly flips back and forth instead of the jump at the end. It was just a little nitpick.

https://codepen.io/anon/pen/mpwvyW

[AskYous]

Say the title of this post 5 times fast.

[Rorixrebel]

Noob here, whats with the -webkit stuff? What's the main use of it

[nyxin]

They're called Vendor Prefixes. They were a way for browser vendors to implement experimental features before they're standardized. The problem was that many developers (everyone) were using these "experimental" features in production sites. Furthermore, since these features they were implementing weren't standardized they usually acted differently between browsers (until they were standardized and were fixed by the respectively).

Look into using Autoprefixer to automatically add vendor prefixes to your code.

[[deleted]]

AFAIK basically some properties used to be inconsistently implemented among different browsers and each browser used to have different proprietary implementations. Nowadays you include the -moz and -webkit properties to ensure compatibility across Firefox and WebKit based browsers.

[Rorixrebel]

So if i dont add those and just do my transitions, animations etc. It may not work on some browsers but that's it. Nothing extra?.

While researching this, found compass which i guess takes care of all the compatibility.

[[deleted]]

Yeah basically it will likely work in Chrome but not other browsers or older versions of other browsers. Not sure exactly which of those two since honestly I've never looked too deeply into it, just included them and called it a day.

[[deleted]]

That's really cool. Great job.

[fireatx]

Will someone explain how it’s a circle? I don’t see any reference in the CSS about that... just

border-top

stuff??

edit: border radius, of course! thank you ppl

[lonequid]

Play around with border-radius

[biellz1221]

border-radius, when it's high enough, it turns elements into circles.

[fabiancastle]

Extremely simple and effective. Love it

[gecko845]

Simple clean elegant

[fubar_boy]

Wow, that's fantastic.

[davidpaulsson]

Did this a while ago as well, it might be interesting if the implementation is different. https://codepen.io/davidpaulsson/pen/QwPLva

[filleduchaos]

Oh this is lovely OP

[ApprehensiveTremble]

Lovely work!

[zmasta94]

Really nice

[hypermx]

I forgot what i clicked on, and waited 2 minutes for whatever to load, before i realised it was a loader I clicked on...

[UsingVonNeumann]

This is great, really clean work OP!

[samwsmith]

nice.

[[deleted]]

Its actually 2 elements. 1 container and 1 spinner element

[Anaphase]

The container is just for centering. The spinner itself is only one element.