Ajax Loader, Animated Icons, Live Background
... in GIF / SVG / APNG / CSS / LOTTIE / MP4 & More !
Animate what you need. Text, Patterns, or Backgrounds.
all icons are also available in static form released under loading.io BY license.
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.
Maximize flexibility with Lottie format generation for using in mobile apps, web applications and programmatically control your animation.
Lottie generation is possible for icon, text and spinner animations as an alternative format for modern frameworks.
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.
SVG-based progress bar library in JavaScript. Highly customizable and requires no JS, while also provides a set of handy JS API.
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 .png
.
You can learn more about using animation by reading following articles:
Any questions or suggestion? Feel free to leave comment here. :)
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.