Different types of loading icons are slightly different in their usage and compatibility.
Use SVG spinners just like using an image. e.g.,
SVG spinner as background image also works:
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:
Simply use preloader GIF in an <img> tag, or as the background of another element:
For example, here is a spinning GIF:
Use GIF loader if you need compatibility in Internet Explorer.
All SVG loaders use SMIL to animate elements.Modern browsers support SVG and SMIL except Internet Explorer:
All CSS loaders use CSS3 Animation to animate elements.Modern browsers support CSS3 except Internet Explorer:
All modern browsers support GIF loader. Use GIF loader to ensure optimized browser compatibility.
Except this spinner builder, loading.io also provides libraries and modules for your project to enhance loading related experience.
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:
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:
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:
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.
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.
You can leave a suggestion about what you think we can do about a loader. It might becomes the next feature we release!
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.