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.

photo background

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.

svg editing

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 natively 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 had already supported animated SVG.
coding


We Also Provide ...

You can find more animation-related stuffs 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. :)

loader

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

loading.io loader

Loading.io is brought to you by:
PlotDB Ltd. brand logo / 見聞科技有限公司 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