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.
Install with Bower: bower install spinnach
Clone the Github project: git clone https://github.com/Form5/Spinnach.git
Or download zip.
After installation simply load the files in the head of your document, preferrably right after you load your site's CSS files:
<head>
...
<link rel="stylesheet" href="path/to/spinnach.min.css">
<script src="path/to/spinnach.min.js"></script>
</head>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. The image will then be faded in when it has loaded successfully.
<div class="img-wrapper">
<img src="..." onload="Spinnach.load(this)" />
</div>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:
Spinnach.preload([
'/img/image-1.png',
'/img/image-2.png',
'/img/image-3.png'
]);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.
$size: 40px;
$border-width: 4px;
$border-color: transparent;
$spinner-border-color: #41485E;
$spinner-time: 0.75s;
$img-fade-time: 0.25s;After customizing Spinnach, you can build it again by running:
$ npm install
$ grunt buildWritten by Form5. Inspired by Barrel.
Olafur Nielsen, co-founder at Form5.
Benedikt D Valdez, developer at Form5.