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


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

Bring Your Work Alive

supercharge with unlimited animations, advanced functionalities and support us to make more great stuff!

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

loading.io

Loading.io is brought to you by:
PlotDB Ltd. / 見聞科技有限公司 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