How to create loading image using CSS only

http://web-tricks.org/content/how-create-loading-image-using-css-only

by drugget • 9 years ago

59 29 9 years ago

_ZeD_• 9 years ago

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...

sametmax• 9 years ago

It's just fun.

josephorjoe• 9 years ago

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.

wilz• 9 years ago

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.

leeoniya• 9 years ago

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

rocbear• 9 years ago

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

andy_ppp2• 9 years ago

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

pharrlax2• 9 years ago

Depends how much you value code readability vs. minimizing markup

andy_ppp2• 9 years ago

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

pharrlax2• 9 years ago

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

strombourg• 9 years ago

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".

misterhtmlcss• 9 years ago

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.

cptskippy• 9 years ago

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.

victormustar2• 9 years ago

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

uncleleech• 9 years ago

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

Kubuxu• 9 years ago

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

ninju• 9 years ago

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)

bpicolo• 9 years ago

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

exprA• 9 years ago

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

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

  <blink>...</blink>

victormustar2• 9 years ago

you can edit the keyframes very easily

mozumder• 9 years ago

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

ams6110• 9 years ago

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

ravenstine• 9 years ago

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).

tyingq• 9 years ago

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

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

chrisnager• 9 years ago

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/

andreapaiola• 9 years ago

Not a spinner:

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

bluetwo• 9 years ago

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

the_cat_kittles• 9 years ago

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

kentbrew• 9 years ago

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

How to create loading image using CSS only

Related Stories