Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »
{{n.message}}

Loading.css

40+ handcrafted css animation dedicated for your loaders


Download Now Make GIF from It

and it's small, only 6kb gzipped!

CSS Animation for Loader

All animations here are designed for repeatable, infinitely playing.


ld-spin-fast
ld-cycle
ld-spin
ld-heartbeat
ld-squeeze
ld-rubber
ld-tick
ld-jump
ld-bounce
ld-radio
ld-broadcast
ld-bounce-a
ld-clock
ld-skew
ld-shadow
ld-shadow-a
ld-tremble
ld-slide-rtl
ld-slide-ltr
ld-slide-ttb
ld-slide-btt
ld-bounce-rtl
ld-bounce-ltr
ld-hit
ld-wander-h
ld-wander-v
ld-orbit
ld-fade
ld-rush-ltr
ld-rush-rtl
ld-flip
ld-flip-h
ld-flip-v
ld-coin-h
ld-coin-v
ld-surprise
ld-shake
ld-jelly
ld-float
ld-rotate
ld-blur
ld-vortex-out
ld-vortex-in
ld-wrench

And with 7 Pure CSS Loaders:

ld-ball
ld-hourglass
ld-ring
ld-square
ld-cross
ld-spinner
ld-pie

if you are looking for prebuilt css loader, check out our prebuilt CSS loaders or correponding Github Repo.


Download

loading.css is available here:

https://loading.io/css/loading.css

Usage

1. include loading.css:

<link rel="stylesheet" type="text/css" href="loading.css"/>

2. pick an animation from the list above, say, ld-surprise, plus a single ld, as class name:

<img src="sample.svg" class="ld ld-surprise"/>

3. and here is the result:



It works on different frameworks and elements, like, a bootstrap button animation or a fontawesome loading animation:

<div class="btn btn-primary ld ld-heartbeat"> Click Me </div> <i class="fa fa-refresh ld ld-spin></i>

will be like this:

Click Me


Advanced Control

Use CSS animation attributes to better control the behavior of your animation. Additionally, we also provide css classes as shortcut for those attributes.


Adjust Speed

Use animation-duration to control animation speed. For example:

<img class="ld ld-bounce" src="sample.svg" style="animation-duration:0.5s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-duration:2.0s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-duration:4.0s"/>

will be like this:

or, use xhalf, x2, x4 for shortcut:

<img class="ld ld-bounce xhalf" src="sample.svg"/>
<img class="ld ld-bounce x2" src="sample.svg"/>
<img class="ld ld-bounce x4" src="sample.svg"/>

for any values other than 0.25, 2 and 4, just use animation-duration to control.



Adjust Direction

Use animation-direction to reverse animation. For example:

<img class="ld ld-jump" src="sample.svg" style="animation-direction:normal"/>
<img class="ld ld-jump" src="sample.svg" style="animation-direction:reverse"/>

will be like this:

or, use reverse for shortcut:

<img class="ld ld-jump" src="sample.svg"/>
<img class="ld ld-jump reverse" src="sample.svg"/>


Pause

Pause animation with animation-play-state. For example:

<img class="ld ld-spin" src="sample.svg" style="animation-play-state:running"/>
<img class="ld ld-spin" src="sample.svg" style="animation-play-state:paused"/>

will be like this:

or, use running and paused for alternative:

<img class="ld ld-spin running" src="sample.svg"/>
<img class="ld ld-spin paused" src="sample.svg"/>


Pause at Frame

Pause animation at certain frame with animation-delay:

<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.00s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.05s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.10s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.15s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.20s"/>
<img class="ld ld-bounce" src="sample.svg" style="animation-play-state:paused;animation-delay:-.25s"/>

will be like this:

we provide 10 stops in classes for controlling pause timing:

<img class="ld ld-bounce paused f00" src="sample.svg"/> <!-- -0.0s --> <img class="ld ld-bounce paused f01" src="sample.svg"/> <!-- -0.1s --> <img class="ld ld-bounce paused f02" src="sample.svg"/> <!-- -0.2s --> <img class="ld ld-bounce paused f03" src="sample.svg"/> <!-- -0.3s --> <img class="ld ld-bounce paused f04" src="sample.svg"/> <!-- -0.4s --> <img class="ld ld-bounce paused f05" src="sample.svg"/> <!-- -0.5s --> <img class="ld ld-bounce paused f06" src="sample.svg"/> <!-- -0.6s --> <img class="ld ld-bounce paused f07" src="sample.svg"/> <!-- -0.7s --> <img class="ld ld-bounce paused f08" src="sample.svg"/> <!-- -0.8s --> <img class="ld ld-bounce paused f09" src="sample.svg"/> <!-- -0.9s --> <img class="ld ld-bounce paused f10" src="sample.svg"/> <!-- -1.0s -->

for any value not listed above, just use animation-delay to control.



Composite Animation

Wrap another element outside your target element for composite animation. For example, a ld-blur and ld-surprise composition:

<div class="ld ld-blur"> <img src="/assets/img/icon/sample.svg" class="ld ld-surprise"/> </div>

will be like this:



Default Loaders

Loading.css is shipped along with 7 default loaders so you don't have to create one yourself. To use the default loaders, just add them to a div. for example, adding ld-hourglass to a div:

<div class="ld ld-hourglass"></div>

will be like this:

    this


You can use css attributes color and font-size to control its appearance. For example, a big green hourglass:

<div class="ld ld-hourglass" style="font-size:64px;color:#8da"></div>

will be like this:

Finally, adding animation ( such as ld-spin-fast ) to make it move:

<div class="ld ld-hourglass ld-spin-fast" style="font-size:64px;color:#8da"></div>

will be like this:



Making GIF

Sometimes we still need GIF for optimizing browser compatibility. Thus, loading.css also comes with the Loading.io online GIF Builder, which can be used to build GIF with loading.css's animation. It provides a preset of icons, and you can also upload your own image.

With the GIF Builder You can upload PNG, JPG, SVG and even another animated GIF, Yet we suggest you to upload SVG since it keeps good quality after resizing. Here are two examples from the GIF Builder:

So let's check it out and play it yourself.



Browser Compatibility

Loading.css uses CSS Animation and Transform 2D:

Use GIF Builder to make GIF if you need to support older browser. You can check Can I Use ... ? for more information about compatibility.