{{ctrl.capture.progress || '0'}}%

Make Loading Icons with
CSS Animation + Your Icons


and 100 icons for your ajax spinner to choose!




 
 

CSS
GIF



.. or you can pick from here:
Feature
Image
Loader
Website
Arrow
Business



FAQ


What's this?

This is a GIF builder for our loading.css Project, which is a set of CSS Animation that works for loading animation. Instead of generating GIF, you can also use loading.css directly in your website. loading.css contains 40+ animations designed for loading effect and several default spinner with pure css.

use loading.css is quite simple. For example, <span class="ld ld-ring ld-spin"></span> will generate a spinner like this:



Why GIF?

CSS Animation is widely supported in various browsers nowaday, yet some older browsers doesn't support. Furhteromre, css-based animation cannot be shared in a standalone form.


Why does the result GIF look blurry when I use my images?

Images are resized according the size slider in the control panel, which cause your gif look blurry. Try using SVG instead of PNG or JPG for better result in differen size.


What's the License of those assets you provided?

Images and icons are free for any purpose, and if you want you can still give attributions to loading.io. You may also find that some icons are available here in the Noun Project, don't worry - for those selected icons, permission is granted here for you to build GIFs.