loading.io - Your SVG + GIF Ajax Loading Icons
{{n.message}}
{{build.progress || 0}}%
Almost There
looks like it takes longer than usual. larger images will need more time to build...actually a neural network is running for color quantization here
so it would take some time...
we will keep optimizing this step, which is made possible with your support.and don't worry, generating SVG, APNG and PNG sequence will be much faster. or you can first try with a smaller size, then use larger size when your design is ready.perhaps it's time for a break. why not just go and find yourself a cup of coffee?
{{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 / APNG !
custom
responsive
simple
wysiwyg
fast
lovely
mobile
Hover to
See All
{{(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
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





Download

{{mod.name}}

{{tag}}

{{mod.desc}}

this is released under
CC0 License / free use for any purpose
Free Download





this is released under
CC-BY License / attribute this page when use
Free Download with Attribution



this is released under
RF License / download after purchased


building GIF from icon is a
building animation SVG from icon is a
generate PNG sequence from icon is a
building APNG from icon is a
attribution free is a
Pro Feature / unlock with following:



  $9.99 / month
  $39.99 / year

 or

  $1.99
Currency in USD

 Pay $1.99 via PayPal
 Subscribe with $39.99 via PayPal Subscribe with $9.99 via PayPal
.. or pay with credit card below
example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}


with

CC-BY License

Attribution is need to this page
free use for any purpose
with

CC0 License

free use for any purpose
with

Yearly Plan

you got:
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
priority in support
cancel anytime7 days refund guarantee
with

Monthly Plan

you got:
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
cancel anytime7 days refund guarantee
with

Pay Per Icon

you got:
no need to attribute
all features for this resource
access to this resource in 48 hours
7 days refund guarantee


Subscribed!

It's great to have you here! It's time for unlimited animation from our service!







Thanks, I'm cool

Cancel Subscription

after canceling subscription, you will need to pay each time for downloading RF license icons or use advanced features after this billing period ends. Are you sure?


  Proceed  
   
Maybe Next Time

Change Payment Method

Use PayPal    

Subscription is now Beta Testing!



advanced feature and subscription will be available soon.
come back then!



OK!

Your Choice

Weekly
6.99
7 days unlimited access
fully licensed
no attribution needed
access to all RF License resources

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Monthly
1.99
your name in about page
help us sustain

Current Plan
Subscribe

cancel anytime
You will be charged now and periodically when your account automatically renews.


Subscribe via PayPal    

OR

example: 1010101010101010
required. example: John Wick

2 digits, like 08
4 digits, like 2021
3 digits, like 476
 {{payPanels.cc.config.action || 'undefined' || 'Purchase'}}

Bring Your Work Alive

suppercharge with unlimited animations, advanced functionalities and support us to make more great stuff!


Free Plan
Free
access to CC Spinners
access to static CC icons

Current Plan
Canceled

start after this period ends
Downgrade

still pro until next period start
Monthly
9.99
30 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation

Current Plan
Subscribe

7 days refund guarantee
cancel anytime
Yearly
39.99
365 days unlimited access
fully licensed
no attribution needed
access to all RF License resources
advanced functionality
Animation from any icons
PNG sequence generation
Large(800px) icon generation
priority in support

Current Plan
Subscribe

7 days refund guarantee
cancel anytime


need more? find more in our loader gallery!
more ...

or, check out what others are building...


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:

  • 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.


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 »