Animate Your Own Icon into GIF / loading.io
{{n.message}}
By continuing to browse this site, you are agreeing to our latest Privacy Policy and Term of Use. OK Detail..
{{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 + advanced features

try with these images preset



... or build animated GIF / SVG / APNG from our icon library ...

  more ...  






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 70+ 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?

For now, GIF has the best compatibility across browsers.

CSS animation is widely supported in various browsers nowaday, yet some older browsers still don't support CSS animation. Furhtermore, CSS-based animation usually needs special care for both its CSS and HTML/SVG part.

Although GIF can be used everywhere, it sadly provides the worst image quality. you can consider APNG, WebP or Animated SVG for the quality sake, but none of them are supported by older browsers.


Why does the result GIF look blurry when I upload 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 for resizing.


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 where you use it. Following are two different bulbs in GIF format, with different background color, now they look better now:


But I need SVG output.

Please check out the v2 animation builder here. We are still beta testing this v2 builder, but it provides layered animation and animated SVG output for your SVG images.

Currently it only supports Google Chrome and it's for Pro user only.










Subscribed!

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







Thanks, I'm cool

Invoice Setting

physical invoice only applicable in Taiwan
Update

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

example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476

Invoice Information

physical invoice only applicable in Taiwan
 {{payPanels.method.cc.config.action || 'Use This Credit Card' || 'Purchase'}}
* Payment will be made with NTD after converting from USD with the latest rate
You will be charged 1$ to verify this credit card. It will be returned immediately.
OR

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
GIF size optimized

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
GIF size optimized
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    


No PayPal Account? Pay with Credit Card


example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476

Invoice Information

physical invoice only applicable in Taiwan
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}
* Payment will be made with NTD after converting from USD with the latest rate

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
Stop Future Billing

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
GIF size optimized

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
GIF size optimized
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime


Sign Into Loading.io
By clicking {{auth.isSignIn && 'LOGIN' || 'SIGNUP'}}, you agree to our Terms and Privacy Policy.
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »