RecordingGenerating
{{build.percent}}%
{{2 * build.size}}px
Run
Stop
Download SVG
Download CSSCSS N/A
Make GIFGIF N/A
{{t}}
want more? share it!

Examples

Choose the icon you want to use, customize it and click "Download SVG" (or Download CSS, depends on your need). SVG file then can be used by <img> tag, for example:

<img src="examples/circle1.svg"> <img src="examples/circle2.svg"> <img src="examples/circle3.svg">

will be like this:



To use CSS animation, please move the html code inside downloaded css file to where you want to place the animation, and link your document with the 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>

will be like this:

Browser Compatibility

loading.io is built upon bootstrap, angularjs, canvg, gif.js and require.js . Some of them use quite new technologies such as web workers, so you might need a new enough browser that supports html5 to play with this site. So far this website is tested on following browsers:

Some animations can't be shown on IE, which is explained in the next paragraph.


About SVG / CSS Animation

In order to use SVG and CSS to make animation, SMIL and CSS3 Animation are used. This constrains the browsers that can see these animations to following:

Conclusion: You can use these animations in almost all browsers except Internet Explorer. To support most browsers, please use CSS animation or pre-generated GIF.

If you find any bugs(except browser limitation) about this website, please kindly report to us.