Loading.css

Download

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

• loading.css
• loading.min.css

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

• https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading.css
• https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading.min.css

Or, via npm:

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

• Each animations in their own file ( under dist/entries folder)
• Separated files for CSS shapes, control kits, and utils (shapes + kits combined).
• lite.min.css

  Partial set of animations lite.min.css which only includes the following classes, and is only 1.2KB gzipped:

  Animations

  ---

  • ld-flip-h
  • ld-spin
  • ld-cycle
  • ld-tick
  • ld-spin-fast
  • ld-clock
  • ld-rubber-h

  Shapes

  ---

  • ld-ball
  • ld-hourgrlass
  • ld-ring
  • ld-square
  • ld-cross
  • ld-spinner
  • ld-pid

Usage

1. include the downloaded 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" />

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

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:

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:

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:

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:

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:

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

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

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:

• Upload Animation Generator - build animated icons in SVG / GIF / PNG by uploading your own images. Also support layered animation with SVG files.
• Text Animation Editor - build GIF / SVG / APNG files with customizable text, style and animation with your choice.
• Loading.io's Animated Icon Library - a complete icon library with the ability to customize style and animation of chosen icons, and output SVG / GIF / APNG format.

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:

• IE <= 9 and Opera mini don't support CSS Animation and Transform 2D.
• Supported but buggy for Android Browser <= 3.
• it works well for all other modern browsers.

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.