Animate Your Own Icon into GIF / loading.io
{{n.message}}
{{ctrl.capture.progress || '0'}}%
Almost There
looks like it takes longer than usual. larger images will need more time to build...actually a neural network is running for color quantization here
so it would take some time...
we will keep optimizing this step, which is made possible with your support.and don't worry, generating SVG, APNG and PNG sequence will be much faster.or you can first try with a smaller size, then use larger size when your design is ready.perhaps it's time for a break. why not just go and find yourself a cup of coffee?

Make Animated Icons with
CSS Animation + Your Icons

GIF + PNG sequence generation for your website and animation project!



Hover to
Show All
 
Yes
No

GIF
PNGs
PNGs
Go PRO for
PNG Sequence
SAVE

need larger GIF or PNG sequence?


Upgrade to Pro Account
unlimited icons + advacned features

or try with these images preset




.. need more animated icon?

try our builders for animated GIF from thousands of premium icons



see what others are building...


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.


Why there are white stroke around my GIF? It looks so jaggy.

GIF, by its nature, can't do well with both transparency and curve edges. It's because GIF doesn't support alpha channel - like opacity with gradient - and only either opaque or complete transparent for each pixel.

Following are the same bulb file in GIF format with two different background color, you can see while the left bulb looks perfect, the right bulb is totally not acceptable in quality.



Meanwhile, following are the same bulb file again but in PNG format. Both bulbs look perfect, because PNG supports alpha channel transparency:



Unfortunately, PNG doesn't support animation. APNG adds animation support to PNG, but some browsers (like IE) don't support APNG.

To make your GIF looks better in your project, config its background to the background color in your project. It will make the GIF better blended into the place you use it. Following are two different bulbs in GIF format, with different background color, now they looks beter now:


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.










Subscribed!

It's great to have you here! It's time for unlimited animation from our service!







Thanks, I'm cool

Cancel Subscription

after canceling subscription, you will need to pay each time for downloading RF license icons or use advanced features after this billing period ends. Are you sure?


  Proceed  
   
Maybe Next Time

Change Payment Method

Use PayPal    

Subscription is now Beta Testing!



advanced feature and subscription will be available soon.
come back then!



OK!

Your Choice

Weekly
6.99
7 days unlimited access
fully licensed
no attribution needed
access to all RF License resources

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
1.99
your name in about page
help us sustain

Current Plan
Subscribe

cancel anytime
You will be charged now and periodically when your account automatically renews.


Subscribe via PayPal    

OR

example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}

Bring Your Work Alive

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


Free Plan
Free
access to CC Spinners
access to static CC icons

Current Plan
Canceled

start after this period ends
Downgrade

still pro until next period start
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime


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