Animate Your Own Icon into GIF /
{{ctrl.capture.progress || '0'}}%

Make Loading Icons with
CSS Animation + Your Icons

and 100 icons for your ajax spinner to choose!



.. or you can pick from here:

Want more?
try our builders for animated GIF from thousands of premium icons

see what others are building...


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

Don't Worry, It's Free!
sign into now
or login with
Newcomer here? Sign up »Already a member? Sign In »