loading.io - Your SVG + GIF Ajax Loading Icons
{{n.message}}
{{build.progress || 0}}%
Almost There

Download

{{mod.name}}

{{mod.desc}}

released under
CC-BY License  / attribute to this page if you use this icon
CC0 License  / still feel free to attribute to loading.io!
Royalty Free - 1.99$ USD
lifetime use right for any purpose of this icon
unlimited geneartion of this icon within 48 hours
7 days refund guarantee

Download with CC-BY
Pay with PayPal and Download
Free Download

what do I suppose to do with this license?


need help? mail to
CC0 License

There is nothing you have to do with icons released under CC0 License. You could still attribute to loading.io to do us a favor.



CC-BY License

You have to add a link on your website, app or the place you use this icon, pointing to this page. here is a valid sample:



Royalty Free License

You can use this icon for any purpose after paid. Additionally, you can make unlimited customization of this icon in any available format, within the following 48 hours.



OK, I Got It
{{build.name}}

You don't have any palette. Make one now
currently, only latest 10 are shown. make another palette
{{c.value|prettyColorHex}}
Use this Palette
 
Save and Use
    Create by Upload Image or Keyword
Build Your Ajax
Loading
Icons with

SVG / CSS / GIF !
custom
responsive
simple
wysiwyg
fast
lovely
mobile
{{(edit.values[k] && 'On') || 'Off'}}
{{pals.pal[0]}}
Yes
No
current in maintenance mode. come back later
buy to unlock
{{mod.license || 'CC-BY'}} LICENSE
valid before {{buy.validDate || '??'}}
GIF
SVG
CSS
GIF
SVG
CSS
Save
spinner
eclipse
ripple
spin
rolling
reload
infinity
gear
facebook
dual-ring
cube
blocks
ball
pacman
wedges
disk
double-ring
ellipsis
flickr
magnify
triangles
radio
$1.99
balls
$1.99
default
$1.99
gears
$1.99
hourglass
$1.99
ring
$1.99
azure
$1.99
wave
$1.99
curve-bars
$1.99
message
$1.99
earth
$1.99
fidget-spinner
need more? find more in our loader gallery!
more ...

or, check out what others are building...

by {{spinner.displayname}}
by {{icon.displayname}}

Usage Guide

Different types of loading icons are slightly different in their usage and compatibility.


SVG Loader

Use SVG spinners just like using an image. e.g.,

<img src="hourglass.svg">

SVG spinner as background image also works:



CSS Loader

CSS spinner has two parts: CSS and HTML. Every generated CSS animation code are valid HTML fragment with CSS inside its <stle> tag, so you can just copy the generated code directly to the place you want the icon to show.

However, to increase reusability, you can separate CSS from HTML into a standalone css file. Here we use the "Gear" CSS loader as an example:

Preview

HTML

CSS



GIF Loader

Simply use preloader GIF in an <img> tag, or as the 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 a 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:


CSS Loader ( IE ≥ 10.0 )

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


GIF Loader ( cross-platform )

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


Loading.io Family

Except this spinner builder, loading.io also provides libraries and modules for your project to enhance loading related experience.



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!



Frameworks

Loaders and libraries in loading.io can be integrated into popular frameworks such as Bootstrap, AngularJS and ReactJS; loading.io itself is built upon these framworks and tested in most modern browsers including Chrome, Firefox, Safari. Please help to report if you find that loading.io doesn't work with certain frameworks; we will add the support into our future plan.

Additionally, there are some technologies we used that don't support IE in certain version; furthermore, IE/Edge all series don't support SVG with SMIL. You can still generate GIF for using our loaders in IE/Edge, but you have to use other modern browsers to use this tool to generate them at first.




Comments

Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »