
How to create loading image using CSS only - drugget
http://web-tricks.org/content/how-create-loading-image-using-css-only
======
victormustar
I'm sorry but this looks awful. it could be ->
[https://jsfiddle.net/cp3r5bmk/](https://jsfiddle.net/cp3r5bmk/)

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

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

    
    
      <blink>...</blink>

~~~
victormustar
you can edit the keyframes very easily

------
rocbear
The original author should really be credited for this:
[https://github.com/dimsemenov/PhotoSwipe/blob/703c415b1b97e8...](https://github.com/dimsemenov/PhotoSwipe/blob/703c415b1b97e8983fff217644888062f07d308b/src/css/default-
skin/default-skin.scss#L388)

------
leeoniya
[https://matejkustec.github.io/SpinThatShit/](https://matejkustec.github.io/SpinThatShit/)

------
pharrlax
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](https://github.com/ksux/ks-design-guide/issues/38)

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

------
tyingq
A collection of CSS spinners:
[https://github.com/tobiasahlin/SpinKit](https://github.com/tobiasahlin/SpinKit)

Demo: [http://tobiasahlin.com/spinkit/](http://tobiasahlin.com/spinkit/)

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

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

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

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

------
chrisnager
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/](http://chrisnager.github.io/simple-paper-spinner/)

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

~~~
pharrlax
Depends how much you value code readability vs. minimizing markup

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

------
kentbrew
Can also be done with an animated SVG, like so:
[https://gist.github.com/kentbrew/873fabf69f678a7b1d6127ea6e0...](https://gist.github.com/kentbrew/873fabf69f678a7b1d6127ea6e02d481)

------
andreapaiola
Not a spinner:

[https://andreapaiola.name/2015-02-css-loading-
animation/](https://andreapaiola.name/2015-02-css-loading-animation/)

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

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

