How to create loading image using CSS only | Hacker News Reader

How to create loading image using CSS only

web-tricks.org

59 pointsdrugget29 comments

I'm sorry but this looks awful. it could be -> https://jsfiddle.net/cp3r5bmk/

I opened this and saw the loading spinner and sat there wondering why it was taking so long to load the spinner :/

I was trying to change configuration of uMatrix so the spinner would load. I thought it was missing some scripts.

I like your solution.

Where do you define the 'gap' in the cicle? I played around with the jsFiddle and could figure it out (still learning CSS wizardy)

border-right-color (1/4 the border -> transparent)

That isn't even relatively close to being the same animation.

If that doesn't matter, who not just (paraphrasing):

  <blink>...</blink>

you can edit the keyframes very easily

The original author should really be credited for this: https://github.com/dimsemenov/PhotoSwipe/blob/703c415b1b97e8...

https://matejkustec.github.io/SpinThatShit/

If you're going to build a loading indicator, you may as well go for a skeleton UI rather than a spinner. It's better UX practice because it lowers perceived load times and is much less jarring to swap in and out.

See: https://github.com/ksux/ks-design-guide/issues/38

The two are not mutually exclusive. Yep, a skeleton UI is great for filling out the canvas, but the addition of a spinner can indicate that "more stuff is coming".

I agree. A skeleton is good practice because you are progress and a spinner is great because it's allowing the user to understand the webpage is still loading which isn't always obvious.

Google started doing this in Maps and I didn't know what it was or that it was intentional until I saw your post. My impression was that it was just an amateurish mistake of showing the unpopulated template.

A collection of CSS spinners: https://github.com/tobiasahlin/SpinKit

Demo: http://tobiasahlin.com/spinkit/

ok, now I'm asking... why? what this technique offer that a simple animated svg (or event a crusty .gif) don't? If the problem is the load time of the external asset you can still embed the image in the .css file directly...

It's just fun.

I can think of a few advantages, the primary one being you do not need expertise in making graphic files to build this.

And once it is set up, it can be tweaked really easily from within the text editor you are already using for the rest of the project rather than having to jump out into Photoshop/Illustrator or ask the designer for a new asset.

You can modify and finetune the look and timing of the animation in CSS code.

While this is also possible with SVG animations, they tend to be not as widely supported as CSS animations and at least I need to google for information about this topic as SVG is not an everyday topic for me.

Regarding GIF animations: they are larger in size and you first have to find and use tools to generate them. When avoiding the additional request: data URLs are ugly.

After a certain point, the size of this code becomes larger than the size of an animated GIF or SVG.

I had the same thought... how many KB of markup and stylesheets before you exceed the size of a small animated image.

The thing about CSS is you can alter the properties very easily. You can use things like opacity to fake some things with gifs, but you can't change line thickness or color. My experience with SVG is that some things are easy to change with CSS and some aren't, depending on the browser. Support for SVG as background images is poor, so you have to have a bunch of tags declaring the file path or sprite in your markup if you need to use one graphic in multiple places. Using just CSS animation with pseudo elements, your graphic is declared in one place and can be easily changed and reused. Improvements to SVG support would make those advantages null, but that's why I have been using more CSS for small icons(eg indicators) and using SVGs for graphics(things like logos that will only show up on the page once).

Here's my article from two years ago about creating this same spinner with a single HTML element.

See: http://chrisnager.github.io/simple-paper-spinner/

Is there a need for BEM with this (or ever)? Also I'd probably use :before and :after pseudo elements to avoid extra markup...

Depends how much you value code readability vs. minimizing markup

Yes my __thoughts__ exactly; the __extra markup__ and __verbosity__ make things __much more difficult__ to understand.

Can also be done with an animated SVG, like so: https://gist.github.com/kentbrew/873fabf69f678a7b1d6127ea6e0...

Not a spinner:

https://andreapaiola.name/2015-02-css-loading-animation/

I was going to do something similar, but decided just to implement <progress> instead.

its very easy to inline a spinner image. thats another way to go.

Reply on news.ycombinator.com