Single page applications have become more common-place in today's web development, due to the greater complexity of client-side frameworks and browsers and together with them, has become the concept of pre-loading data in the browser before showing it to the user.
Depending on the size of the application and the data that is being loaded, pre-loading occurs either on application start, where the user is shown a 'loading' screen whilst in the background the entire application is loaded and populated. The result of this is an improved user experience once browsing the site, as everything has been loaded beforehand and there is very little wait time between one screen and another.
An alternative method is known as 'lazy-loading' and works by only loading the minimum required when it is requested. Whilst this method is definitely more effective (especially for users on a paid data plan (ex: 3G)); there is going to be an increased wait time between screens as the data is loaded from the API and populated into the HTML.
In either case, you're most definitely going to have to use a pre-loader at one time or other. An AJAX loader is simply an animation illustrating to the user that something is happening in the background. When these were in their infancy, one would browse to ajaxload.info or preloaders.net and download the GIF animation and simply place this into the HTML.
Unfortunately, using GIF files is not really the best option: GIF files are not scalable; images tend to be slightly larger to download and changing any property (such as color) will require a new GIF file.
Alternatively it is now possible to use jQuery, CSS3 or SVG to create a preloader.
Brent Jackson puts up a great collection of SVG preloaders here: http://jxnblk.com/loading/. The problem with SVG preloaders is cross-browser compatability. Whilst loading SVG is supported in most browsers (including IE9); a large set of SVG CSS functionality is not supported in Internet Explorer, Opera or Firefox; making it mostly unsuable. However as support increases, it is probably the way to go.
CSSLoad.net offers a tool to build your custom CSS3 preloader by inputting some properties and selecting from a little library: http://cssload.net/. The result is a downloadable piece of HTML & CSS which could be applied onto your own website.
Material Design
Recently Google introduced it's Material Design concept, a set of user interface guidelines to create a unified and improved user experience.
Something that is seen as part of Google's material design concept on it's new Inbox and Calendar applications is it's trendy preloader. The best working version I have seen of this is: http://codepen.io/mrrocks/pen/EiplA however being built purely in SVG, it does not work well in FireFox or IE.
So I went about trying to create my own implementation in pure CSS3; which unfortunately is nowhere near where I want to be and that is why I would need your help. Check it out below and feel free to fork and fill in the missing bits:
See the Pen Material Design Spinner by Kevin Farrugia (@kevinfarrugia) on CodePen.