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, both for infinitely or one time play.

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

Additionally, you can also choose files that include different subsets of animations to further reduce the size of the files needed:

Usage

1. include the downloaded loading.min.css:

<link rel="stylesheet" type="text/css" href="loading.min.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" />
kirby

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"/>
samplesamplesample

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"/>
kirbykirby

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"/>
kirbykirby

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"/>
kirbykirbykirbykirbykirbykirby

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

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:

tomatomelon

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

Load Comments

By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.

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