Loading.io

loading.io is now loading ...
loading.io

Animation
Made Easy.

Ajax Loader, Animated Icons, Live Background
... in GIF / SVG / APNG / CSS !

Get Start
Icon Library

animate any icons from our icon library

Your Image

upload and animate image with your own icon

Your Words

make unique text animation in seconds

more features ...
Draggable
upload 
Button
Font
Yes
No
...
Load More
Red
Green
Blue
Hue
Saturation
Luminance
Hue
Chroma
Luminance

Use This Palette
Save as Asset
Undo
Go Pro to Unlock All
go Pro to unlock all fonts
Upgrade Now
FREE
$1.99

More than Preloaders.

Animate what you need. Text, Patterns, or Backgrounds.

We make icons, You animate.

all icons are also available in static form released under loading.io BY license.

canvastiepolice officercheerstiefishermangangsterheterosexualkingsexstar trekvendettamedalmedalpriestmedalrubyjumper dressesclothesparty flagparty hatparty hornpolice carbikeambulancecargo shipconvertibletrucktrucktrucktraitorchampagnecheersballoonballoonbaby suitclothesbeerdobokwheeldata visualizationcakegift-shirthelmetsports cartankervestpuzzleradial bar
find more icons in loading.io's icon library »

You design, We host.

save your customization in your loading.io account for sharing, collaboration and for your future use.


looking for more?
Search

Meet Loading.io

the simple enough animation service for you

Loading is a typical situation to use animation, but never the least. With loading.io, making animation becomes so easy that you will probably want to animate everything that can be animated.

With semantic animations and our dedicated online editor, loading.io helps you quickly customize and generate your own animations without worrying about the complex timeline thing. Furthermore, animations are provided in various formats so it won't be a problem to use them in different platforms or framworks.

Animatable & Customizable

Resources on loading.io, including icons, patterns and texts, are all by default animatable and customizable.

You can customize any of them by your own style and save the configurations directly in loading.io for future use.

Vector format Image

Images are all based on the loseless vector format SVG to optimize the image quality and file size.

In addition to SVG format, we also provide other formats including PNG, GIF and CSS for you to download, depending on the resource type you are working on.

Service At Cost

Premium features & content are available in both subscription/one-time purchase, with 7 days refund guarantee and friendly cancellation policy.

Save your time and money over huge software if you don't want to spend hours in tutorials and functions you'll never use.

No JavaScript Required

Animated SVG is nativelly supported by all modern browsers*. Save your loading time and bandwidth from yet another JS Library.

Need compatibility of older browsers like IE? we also provide GIF format and PNG Sequence for you to make sprite animation in PNG.

* Latest Microsoft Edge already supports animated SVG.


We Also Provide ...

You can find more animation-related stuff here.

Upload Editor

Upload and animate your own images! Supports both raster format ( PNG, JPG or GIF ) or vectorized SVG format.

Pure CSS Spinner

If you only want some free css spinner, Pure CSS Spinner provide a set of free spinner in pure css, released under CC0 License.

Ajax Spinner

Ajax loaders and spinners for indicating ajax or website loading status, shipped in 4 formats with both free and premium content.

Animated Icons

A complete icon library empowered by animation with loading.io's online editor. Static icons are free and released under Loading.io BY License.

Loading Pattern

Seamless repeatable SVG patterns that are animatable, available in vector format SVG and raster formats PNG and GIF.

Loading Background

Full-sized, live images dedicated for the background of your next project. Avaiable in vector format SVG and raster format PNG ( static form )

Loading Text

Animate your own words with loading.io's animated text generator. Support 800+ fonts and a list of style presets for you to choose.

Loading Bar

SVG-based progress bar library in JavaScript. Highly customizable and requires no JS, while also provides a set of handy JS API.

loading.css

A set of seamless repeatable semantic animations in CSS for different kind of purpose, along with several pure css loaders bundled inside.

transition.css

A set of pre-built, semantic animations in CSS for transitional effect, such as scene entering, exiting, dialog toggling.

Loading Buttons

A tiny css library for adding loading state on your button. Compatible across different frameworks, such as Bootstrap, Semantic UI, or Pure CSS.

Loading Buttons Generator

Online CSS button generator for generating loading buttons with different styles. A list of button preset is also provided for you to choose.

Flexbox Generator

A playground for quickly prototyping and generation of flexbox-powered CSS code. This generator is built with a easy-to-use interface.

Random Color Palette Generator

Randomly generate palette for you based on given images, colors, keywords or even another palette. Use it to customize an unique design of your own.

Open Source Projects

We also provide various open source projects that are related to animation. Check our github repository for more information.

More on the Way...

Anything you'd like to see in loading.io? Just contact us and share with us your thought!



HowTo

Brief guide on using animation images, with ajax preloaders as example.

Animation is a powerful way to hint and notify users about events, progress or simply catching users' eyes. For example, preloaders are commonly used to hint users about the loading status of an app or web page.

Animated images in different formats are slightly different in the way to use them, and furthermore, the compatibility in different environment. Here we will cover 4 different types of animation formats and show how to use them in websites.

SVG Loaders

You can simply use SVG loaders as an image in web page. For example,

<img src="hourglass.svg"/>

However, while being widely adopted, SVG loaders don't work in older browsers like IE and older Microsoft Edge.

CSS Loaders

Every CSS loader contains two part: HTML part and CSS part. All css spinners in loading.io are generated in the way that you can copy & paste them directly into your HTML, but you can also separate them into HTML and CSS files manually to increase its reusability.

CSS preloader can only be used in web sites or any container that supports HTML and CSS animation.

Result
HTML
CSS
<div class="loadingio-eclipse"> <div class="ldio-rpinwye8j0b"> <div> </div> </div> </div>
@keyframes ldio-rpinwye8j0b { 0% { transform: rotate(0deg) } 50% { transform: rotate(180deg) } 100% { transform: rotate(360deg) } } .ldio-rpinwye8j0b div { position: absolute; animation: ldio-rpinwye8j0b 1s linear infinite; width: 160px; height: 160px; top: 20px; left: 20px; border-radius: 50%; box-shadow: 0 4px 0 0 #e15b64; transform-origin: 80px 82px; } .loadingio-eclipse { width: 200px; height: 200px; display: inline-block; overflow: hidden; } .ldio-rpinwye8j0b { width: 100%; height: 100%; position: relative; transform: translateZ(0) scale(1); backface-visibility: hidden; transform-origin: 0 0; /* see note above */ } .ldio-rpinwye8j0b div { box-sizing: content-box; }

GIF Loaders


GIF preloaders can be used simply as a normal image with <img> tag. It's the format with the best compatibility across devices and browsers, but works poor regarding image quality.

<img src="hourglass.gif"/>

APNG Loaders


APNG loader can be used directly in <img> tag too, and it has the better quality than GIF loaders. Alas, not all browsers support it, especially the older browsers. Fortunately, APNG has been supported by Microsoft Edge with the latest version.

APNG is compatible with PNG so when you find the file extension .apng doesn't work in some situation, you can simply rename it to .png.

<img src="hourglass.apng"/>

More about Animation

You can learn more about using animation by reading following articles:

Comments

Any questions or suggestion? Feel free to leave comment here. :)


older comments are available via facebook social plugins. View all »


Jagged Edges?

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.


Close This Popup

Import Colors

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?


Yes, Do It
Cancel

Ooops!

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:

  • Reload this page and try again.
  • Disable some browser plugins, such as AdBlock.
  • Try with another browser or computer.
  • Contact us and report this issue.

Sorry about this inconvenience!


Close This Popup

Building Completed.

copy/right click to save or click download button

Now Building

Your image will be ready soon

The request resource is now being built. Soon the file will be ready with a link for downloading popup for you to download.


Things don't work?
It might be AdBlock. Why?
By continuing to browse, you agree to our use of cookies.
For more details please check our privacy policy.
Details
OK

Bring Your Work Alive

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

Free Plan
FREE

  • Access to Free Resources
  • 10 Free Assets
    Save your design as assets online
    for sharing and future use.
Sign Up
Current Plan
Stop Future Billing
Billing Page
 
 
Monthly Plan
9.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
Subscribe
Subscribe
Current Plan
 
7 days refund guarantee
cancel anytime
Yearly Plan
39.99USD

  • Unlimited Access
    • Access to All Paid Content
  • Fully Licensed
    • Attribution Free
    • Lifetime Right of Downloaded Items
  • Full Features
    • Animation from any icons
    • PNG Sequence Generation
    • Large Image Generation
    • Optimized GIF Size
  • Up to 200 Assets
    Save your design as assets online
    for sharing and future use.
  • Priority Support
Subscribe
Subscribe
Upgrade
Current Plan
7 days refund guarantee
cancel anytime

Monthly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »

Yearly Plan

includes


  • whole site unlimited access
  • fully licensed
  • full features
  • priority support


7 days refund guarantee
cancel anytime


more about pricing »





Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.

Payment Complete

Thank you for purchasing this item!

We have confirmed your purchase and the transaction is complete. Your purchase history can be found in your billing page where you can also find invoice for this payment.

Continue to Download

Subscribed.

Thank you for subscribing our service!

We have confirmed your subscription and the first transaction has been made. You can find your purchase history in your billing page where you can also find invoice for this payment.

Subscription will be automatically renewed at the end of each billing period. You can cancel it anytime in the billing page.


Let's Proceed
You are downloading

Icons

/ icon
generated with loading.io's Pro features. Unlock Pro Features by:
You are downloading

Icons

/ icon
released under Loading.io FREE License. download with:
You are downloading BY Licensed

Icons

/ icon
which can be used for free with attribution. how to attribute?
Free Download
Free Download with Attribution
.. or pay to remove attribution
for unlimited downloads & features
9.99USD
monthly
39.99USD
annually
only for this item
1.99USD
2 days
Name is required
accept
This card is not supported
Incorrect date
Incorrect CVC
ZIP Code optional
incorrect zip code format
或者將發票寄送至此地址: 僅適用台灣境內
地址為必填
收件人
收件人為必填
統一編號 選填
買受人抬頭 選填
Invalid coupon
Pay
there are errors in your data.
Payment to PlotDB Ltd. in TWD converted from USD with latest rate

Transaction processed by TapPay™ under PCI-DSS Level 1 compliance & SSL 2048bit encryption.




Pay Per Item

paid once

includes
  • 2 days pass to download from editor
  • Full features to this item
  • Lifetime licensed, attribution free
  •  Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Monthly Plan

auto renewal

includes
  • whole site unlimited access
  • fully licensed
  • full features
  • Up to 200 Assets
  • priority support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Yearly Plan

auto renewal

includes
  • Unlimited Access
  • Fully Licensed
  • Full Features
  • Up to 200 Assets
  • Priority Support
  •  Plan Details ...
7 days refund guarantee
cancel anytime

more about pricing »

Free with Attribution


you can ...
  • Free to Use with Attribution
  • Pay to Remove Attribution
  • How to Attribute ...


more about pricing »

Free Download


you can ...
  • Free for Any Purpose
  • No Need to Attribute or Pay


more about pricing »

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.

Customer Service: [email protected]
LOADING.IO