make animated icons from your uploaded images into GIF, SVG or PNG Sequence formats
This tool is loading.io's animated image builder that helps you quickly make simple animations from your own image with custom design. It's a simplified version of our upcoming animation editor, which allows you to do layered animation and export animated SVG format.
We also provide a set of css loading animations loading.css for animating images directly in your website. loading.css contains 50+ seamless looping animations along with 7 simple spinner with pure css, and is quite handy when you want some simple appealing animation.
loading.css is quite easy to use. Following is an example of spinner using loading.css:
While it's quite easy to use, you may still want to use a generator when you need more complicated animations or alternative image format. And that's how this tool can help you.
For now, GIF is the format with 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.
However, image quality of GIF usually isn't as good as SVG. Newer formats such as APNG, WebM and animated SVG provide better image quality, but none of them are supported by older browsers.
Uploaded images are resized by the size you specified in the editor, which makes the generated GIF blurry. Try using SVG instead of PNG or JPG for better result. Turning on "smoothing" option may also help.
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 - thus every pixel in GIF is either opaque or completely transparent.
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, PNG format image as below supports alpha channel transparency so they blend smoothly in the edge. In following example, both bulbs look perfect and no jagged edges around images:
Unfortunately, PNG doesn't support animation. APNG adds animation support to PNG, but some browsers (like IE) don't support APNG. Latest version Edge already supports APNG so in the long run it will be a good format to choose.
If you have to use GIF file, here are some tips to make it look better:
We now support SVG generation with this upload generator for uploaded SVG files, so simply upload a SVG file will do.
SVG animation is layer-based, just like our online animation editor for our icon library, with animation options available in the advanced panel. For more sophisticated animation editing, we also provide Advanced Animation Editor for multi-layer editing and image composition.
You can also check these articles ( Improving Gif Quality and Format for Animation ) for more information about how the effect of different configurations / format will be like.
Any questions or suggestion? Feel free to leave comment here. :)
turning off the edge smoothing option might help
By its design, GIF is quite limited in quality especially with transparency on. If you got GIF with colored border around edges of generated image, you can turning off Edge Smoothing
option and try again.
This option will give crispy edges around generated image, but might lead to pixelated result, so please use it at your discretion. For more information, check our guide about improving GIF image quality.
update palette with picked colors in editor
This will bring up the palette editor with a new palette from all colors you have picked in this editor. Current chosen palette won't be replaced before you click "Use This Palette".
Are you sure to do this?
We failed to build the requested resources for you.
This might be caused by internal bugs, side effects of browser plugins, or unsupported browsers. You could try to resolve this with following:
Sorry about this inconvenience!
copy/right click to save or click download button
Your image will be ready soon
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.