Spinnach

Spinnach is a way of loading images nicely by fading them in after showing a loading spinner. Written in only 1.5KB of Javascript and CSS with no dependencies on jQuery or other libraries.

Download

How to fetch Spinnach?

Install with Bower: bower install spinnach

Clone the Github project: git clone https://github.com/Form5/Spinnach.git

Or download zip.

Instructions

After installation simply load the files in the head of your document, preferrably right after you load your site's CSS files:

Lazy loading

Wrap your image as follows, add the onload attribute and you're good to go. The default approach assumes you have fixed height and width set on your image wrapper.

Pre-loading images

Spinnach also supports image pre-loading. It can be useful when you'd like to load images before they are requested. F.x. if you have a large "hero section" with image backgrounds on your sub-pages, it can make a better user experiences if these images have already been loaded before the user requests them.

To do that you simply call `Spinnach.preload()` and pass in an array of images that you'd like to preload:

Advanced functionality

Feel free to configure Spinnach to your needs. You can configure the size, color and animation timings of your spinner to match your site's color pallette. These configurable variables can be found in src/spinnach.scss.

After customizing Spinnach, you can build it again by running:

Author

Written by Form5. Inspired by Barrel.

Contributors

Ólafur Nielsen, co-founder at Form5.

Benedikt D Valdez, developer at Form5.