need more? view all spinners in our preloader gallery!

More than Preloaders.

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

Pattern

seamless repeatable animated patterns online.

see all »

Background

full-sized, delicate animated background in vector format.

see all »

Text

animate your own text easily and quickly

input your text »

Upload

animate your own images, even in layers!

upload now »

We make icons, You animate.

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

find more icons in loading.io's icon library »

looking for more?

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.

... learn more about features & pricing »

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.

Lottie Powered

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.

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,

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.

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.