Loading.css

60+ handcrafted css animation dedicated for seamless repeatable animations.


Download NowGithub Repo Make GIF with It
and it's small, only 7KB gzipped!

CSS Kits for Repeatable Animations

All animations in loading.css are designed to be seamless repeatable, and for both infinitely or one time play.

beat
blink
blur
bounce
bounceAlt
breath
clock
coin-h
coin-v
cycle
cycle-alt
damage
dim
fade
flip
flip-h
flip-v
float
heartbeat
hit
jelly
jelly-alt
jingle
jump
measure
metronome
move-btt
move-fade-btt
move-fade-ltr
move-fade-rtl
move-fade-ttb
move-ltr
move-rtl
move-ttb
orbit
pulse
rubber-h
rubber-v
rush-btt
rush-ltr
rush-rtl
rush-ttb
shake-h
shake-v
shiver
skew
skew-alt
slide-btt
slide-ltr
slide-rtl
slide-ttb
smash
spin
spin-fast
squeeze
surprise
swim
swing
tick
tick-alt
tremble
vortex
vortex-alt
wander-h
wander-v
wrench


with 7 Pure CSS Shapes

work best with loading.css to make some ajax loader!

ld-ball
w/ ld-flip-h
ld-hourglass
w/ ld-spin
ld-ring
w/ ld-cycle
ld-square
w/ ld-tick
ld-cross
w/ ld-spin-fast
ld-spinner
w/ ld-clock
ld-pie
w/ ld-rubber-h


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


Download

Loading.css is available for downloading in its Github Repo. Or, you can get it directly with following links:

You could also use loading.css directly via CDN like jsDelivr:

Or, via npm:

npm i @loadingio/loading.css

Usage

1. include loading.css:

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

2. pick an animation class from the list above (say ld-surprise) plus the default class ld and add them in the target element as its class names:

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

Loading.css works on different frameworks and elements. For example, we can animate buttons of Bootstrap or a single icon from Fontawesome:

<div class="btn btn-primary ld ld-heartbeat"> Click Me </div> <i class="fa fa-location ld ld-bounce" style="display:block"> </i>
Bootstrap Button

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="f.svg" style="animation-duration:0.5s"/> <img class="ld ld-bounce" src="f.svg" style="animation-duration:2.0s"/> <img class="ld ld-bounce" src="f.svg" style="animation-duration:4.0s"/>

or, use xhalf, x2, x4 or xp35, xp15 for shortcut:

<img class="ld ld-bounce xhalf" src="f.svg"/> <img class="ld ld-bounce x2" src="f.svg"/> <img class="ld ld-bounce x4" src="f.svg"/> <img class="ld ld-bounce xp35" src="f.svg"/> <!-- available in master branch --> <img class="ld ld-bounce xp15" src="f.svg"/> <!-- availabel in master branch -->

for any values other than 0.5s, 2s, 4s, 0.35s and 0.15s, please just use animation-duration to control.

Adjust Direction

Use animation-direction to reverse animation. For example:

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

or, simply use reverse:

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

Pause

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

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

or, simply use running and paused:

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

Pause at Frame

Pause animation at certain frame with animation-delay:

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

we provide 10 stops with css classes for controlling pause timing:

<img class="ld ld-bounce paused f00" src="f.svg"/> <!-- -0.0s --> <img class="ld ld-bounce paused f01" src="f.svg"/> <!-- -0.1s --> <img class="ld ld-bounce paused f02" src="f.svg"/> <!-- -0.2s --> <img class="ld ld-bounce paused f03" src="f.svg"/> <!-- -0.3s --> <img class="ld ld-bounce paused f04" src="f.svg"/> <!-- -0.4s --> <img class="ld ld-bounce paused f05" src="f.svg"/> <!-- -0.5s --> <img class="ld ld-bounce paused f06" src="f.svg"/> <!-- -0.6s --> <img class="ld ld-bounce paused f07" src="f.svg"/> <!-- -0.7s --> <img class="ld ld-bounce paused f08" src="f.svg"/> <!-- -0.8s --> <img class="ld ld-bounce paused f09" src="f.svg"/> <!-- -0.9s --> <img class="ld ld-bounce paused f10" src="f.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/f.svg" class="ld ld-surprise"/> </div>

Default Loaders

As listed above, Loading.css ships with 7 pure css shapes so you don't have to craft loaders by yourself. To use those shapes, just add CSS class of the desired shape along with an additional ld class to a DIV element. For example, adding ld-hourglass to a DIV:

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

You can customize its appearence by tweaking css styles color and font-size. For example, here is a big green hourglass:

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

And of course we want to animate it, with loading.css's animation classes:

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

Work with GIF and SVG files

Sometimes we need GIF for optimizing browser compatibility or for advanced animation. While Loading.css provides simple, predefined animation types, it's used in loading.io to provide image generation with more sophisticated animation, includes:

With the GIF Builder You can upload PNG, JPG, SVG and even another animated GIF. SVG is also supported; in addition, you can animate SVG by layers and save it sa SVG file again. We suggest you to use SVG since it keeps good quality after resizing. Here are two examples from the GIF Builder:

Browser Compatibility

Loading.css uses CSS Animation and Transform 2D:

Please use above tools to generate GIF if you need compatibility for older browsers. You can check Can I Use ... ? for more information about browser compatibility for CSS Animation.

Comments

Any questions or suggestion? Feel free to leave comment here. :)

loader

Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 VAT No. 52518929

Service for making ajax loaders / loading gifs / preloaders and animated icons, live background, animated text in GIF / SVG / APNG / CSS.

Customer Service: [email protected]
LOADING.IO