LOADING.IO
Login With Facebook

{{auth.failed}}
LoginSign up
Sign up
Log In
{{n.message}}
Build Your Ajax
Loading
Icons with

SVG / CSS / GIF !
RecordingGenerating
{{build.percent}}%
{{2 * build.size}}px

save
Run
Stop
Get SVGSVG N/A
Get CSSCSS N/A
Make GIFGIF N/A
{{t[0]}}

Examples

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:

<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 GIF loader 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:



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.



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