Ajax Loader, Animated Icons, Live Background
... in GIF / SVG / APNG / CSS !
Animate what you need. Text, Patterns, or Backgrounds.
all icons are also available in static form released under loading.io BY license.
save your customization in your loading.io account for sharing, collaboration and for your future use.
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.
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.
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.
You can find more animation-related stuffs here.
Upload and animate your own images! Supports both raster format ( PNG, JPG or GIF ) or vectorized SVG format.
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 loaders and spinners for indicating ajax or website loading status, shipped in 4 formats with both free and premium content.
A complete icon library empowered by animation with loading.io's online editor. Static icons are free and released under Loading.io BY License.
Seamless repeatable SVG patterns that are animatable, available in vector format SVG and raster formats PNG and GIF.
Full-sized, live images dedicated for the background of your next project. Avaiable in vector format SVG and raster format PNG ( static form )
Animate your own words with loading.io's animated text generator. Support 800+ fonts and a list of style presets for you to choose.
A set of seamless repeatable semantic animations in CSS for different kind of purpose, along with several pure css loaders bundled inside.
A set of pre-built, semantic animations in CSS for transitional effect, such as scene entering, exiting, dialog toggling.
A tiny css library for adding loading state on your button. Compatible across different frameworks, such as Bootstrap, Semantic UI, or Pure CSS.
Online CSS button generator for generating loading buttons with different styles. A list of button preset is also provided for you to choose.
A playground for quickly prototyping and generation of flexbox-powered CSS code. This generator is built with a easy-to-use interface.
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.
We also provide various open source projects that are related to animation. Check our github repository for more information.
Anything you'd like to see in loading.io? Just contact us and share with us your thought!
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.
You can simply use SVG loaders as an image in web page. For example,
However, while being widely adopted, SVG loaders don't work in older browsers like IE and older Microsoft Edge.
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.
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.
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
You can learn more about using animation by reading following articles:
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.