All animations in loading.css are designed to be seamless repeatable, and for both infinitely or one time play.
work best with loading.css to make some ajax loader!
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:
1. include 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:
Loading.css works on different frameworks and elements. For example, we can animate buttons of Bootstrap or a single icon from Fontawesome:
Use CSS animation attributes to better control the behavior of your animation. Additionally, we also provide css classes as shortcut for those attributes.
animation-duration to control animation speed. For example:
xp15 for shortcut:
for any values other than 0.5s, 2s, 4s, 0.35s and 0.15s, please just use
animation-duration to control.
animation-direction to reverse animation. For example:
or, simply use
Pause animation with
animation-play-state. For example:
or, simply use
Pause animation at certain frame with
we provide 10 stops with css classes for controlling pause timing:
for any value not listed above, just use
animation-delay to control.
Wrap another element outside your target element for composite animation. For example, a
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
You can customize its appearence by tweaking css styles
font-size. For example, here is a big green hourglass:
And of course we want to animate it, with loading.css's animation classes:
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:
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.
Any questions or suggestion? Feel free to leave comment here. :)
You might have signed up with another email / password before. please try:
Download after paying or upgrading to Pro with your loading.io account.
You are downloading free license item. Sign in to proceed.
Save your works, design and share with others by logging in 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.