Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »
{{n.message}}
Build Your Ajax
Loading
Icons with

SVG / CSS / GIF !
custom
responsive
simple
wysiwyg
fast
lovely
mobile
Make Free Preloaders
with Your Own Icon
MAKE ONE NOW
More Unique Loaders in
Our Loader Collection
CHECK IT OUT
Make Progress Bars
with LoadingBar.js
READ THE DOC




RecordingGenerating
{{build.percent}}%
{{2 * build.size}}px

save
Run
Stop
Get SVGSVG N/A
Get CSSCSS N/A
Make GIFGIF N/A

see what others are building...

by {{loader.displayname}}

Examples

SVG Loader

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

<img src="triangle.svg">

or as background image:



CSS Loader

CSS spinner 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:

<link rel="stylesheet" type="text/css" href="examples/battery.css"> <div class='uil-battery-demo-css' style='-webkit-transform:scale(0.6)'> <outer></outer> <inner></inner> <inner></inner> <inner></inner> <inner></inner> </div>

will look like this:


GIF Loader

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

<img src="spinner.gif"> <div style="background:url(spinner.gif) no-repeat center center;width:32px;height:32px;"></div>

For example, here is an spinning gif:



Browser Compatibility

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.



Customize Loader

You can make nice loading sign gif 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 provides CSS loading animation for developers to build custom loading spinner with CSS and HTML. 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:

<div class="ld ld-ring ld-spin-fast huge"></div>

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:



CLICK ME
<div class="btn btn-lg btn-default ld ld-ext-right running"> <i class="ld ld-ring ld-spin"></i> </div>


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

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.


Comments