Every AJAX-heavy interface needs loading indicators — the small animated spinners and progress bars that reassure the user something is happening in the background. Rather than creating these by hand in an image editor, several online services generate them instantly with your chosen colours and style. Here is a roundup of the best options.
1. Ajaxload.info
The most widely used generator. Choose from a range of indicator styles — spinner, bar, dots, bouncing ball, and more — then set custom foreground and background colours using a colour picker. Generates an animated GIF immediately, no signup required. The output is a single image file ready to drop into your project.
2. Preloaders.net
A wider variety of animation styles than Ajaxload, including more complex multi-element animations. Supports resizing the output and offers both GIF and SVG format export. Good choice when you need something more distinctive than a plain spinner.
3. Loading.io
A more modern service that generates SVG and CSS animations alongside GIF. SVG indicators scale perfectly at any resolution and can be coloured with CSS, making them a better fit for responsive layouts and high-DPI screens. The best option for projects that do not need to support IE7/8.
4. SpinKit (CSS-only)
https://tobiasahlin.com/spinkit/
SpinKit is not a generator but a collection of pure CSS spinners. No images, no JavaScript — just a small block of HTML and CSS that you paste directly into your project. The animations use CSS keyframes and are silky smooth at any size. Colour changes require editing a single CSS property. This is the cleanest modern approach for browsers that support CSS animations.
GIF vs CSS — Which to Use
- Use GIF when you need to support IE7 or IE8. CSS animations are not available in those browsers and GIF remains universally supported.
- Use CSS or SVG for modern projects. They are resolution-independent (look sharp on retina displays), can be restyled without regenerating an image, do not require an extra HTTP request when inlined, and animate at the display's frame rate rather than being locked to the GIF's baked-in frame rate.
For most new projects in 2009, a GIF from Ajaxload is the pragmatic choice given the IE6/7 market share. Keep the SpinKit URL bookmarked for the day you can drop legacy IE support.