SVG Loader

You can use SVG loader just like using an image. For example, with <img> tag:

<img src="triangle.svg">

or as background image:

CSS Loader

CSS loader has two parts: stylesheet and HTML part. Stylesheet is embraced in <style> tag so you can copy the file content into the place you want the icon to show.

To increase reusability, you can separate stylesheet from html part into a standalone css file. For example:

will look like this:

GIF Loader

Use preloader GIF in an <img> tag or as background of another element:

For example, here is an spinning gif:

tl;dr

Use GIF loader if you need compatibility in Internet Explorer.

SVG Loader ( not for IE )

All SVG loaders use SMIL to animate elements. Modern browsers support SVG and SMIL except Internet Explorer:

• SVG: IE ≥ 9.0
• SMIL: IE doesn't Support

CSS Loader ( IE ≥ 10.0 )

All CSS loaders use CSS3 Animation to animate elements. Modern browsers support CSS3 except Internet Explorer:

• CSS3 Animation: IE ≥ 10.0
• CSS3 Transform: IE ≥ 10.0 (partially)

GIF Loader ( cross-platform )

All modern browsers support GIF loader. Use GIF loader to ensure optimized browser compatibility.

You can make great loaders here, but maybe you want to do more, so we also keep on making other modules to help you build better loading expericen with your project. here are some additional modules:

loading.css/ link

loading.css is a set of 40+ css animation crafted for loading spinner, with several pure css loaders bundled inside. It's quite simple to use, for example, here is a ring spinner:

custom loader generator/ link

This is a tool to make loader from any images or iconfont. It is made possible by loading.css, since loading.css provides us lots of options to animate any image.

With this tool, you can upload you own image or select from our prebuilt icons, then make yourself an unique ajax spinner with different types of animations from loading.css. It also suppots GIF image format which means a nested animation could be done:

loading buttons/ link

based on loading.css, loading buttons provides a set of pure css button loader classes so you can add a loading indicator easily in your button. for example:

css button generator/ link

For quickly customizing your loading buttons, we also provide a handy css button geneartor for anyone to play with.

besides testing loader effect, it also provides an nice interface to tweak css attributes like gradient and shadows. There is also a preset of 40+ beautiful buttons, which can be a good start point to customize.

loading colors palette generator/ link

Palettes are useful when making spinner, gradient or progress bar. So before we release a related feature for making loader, we first built a color palette generator.

This generator can generate palettes based on color hint, keywords and uploading images, and is carefully crafted with aesthetically-pleasing in mind. Accompany tools like color picker and random color library will be released in the near future.

Expect more?

You can leave a suggestion about what you think we can do about a loader. It might becomes the next feature we release!

This tool is tested against following browsers:

• Google Chrome 34.0.
• Firefox 28.0
• Safari 7.03
• Opera 18.0.
• Internet Explorer 11.0

It's built upon bootstrap, angularjs, canvg, gif.js and web workers. It's known that some browsers ( e.g., IE10 ) are not supported, so please upgrade your browser if you want to use this tool.