Favicon Vanilla JavaScript loader animation that work when tab is not active
npm install favloader
Vanilla JavaScript library for loading animation in favicon that work when tab is not active
See Demo
Basic solution with animation using canvas don't work out of the box because of limitation
of timer functions in Browsers' main Thread. The library use web worker to create timer
that don't stop when tab is not in focus.
You can use this library if you have time consuming calculation and people switch tabs and
you wan them to be notified when application finish whatever it was doing.
You can using webpack to include the files (using require) use local file in script tag:
``html`
you can also get the file from unpkg.com:
`html`
Initialization
`javascript`
favloader.init({
size: 16,
radius: 6,
thickness: 2,
color: '#0F60A8',
duration: 5000
});
All options are optional (those are the defaults).
from version 0.3.0 the library support animating GIF in browsers that don't support gif files in link tag.
The feature use AJAX and canvas. So gif file need to be on same domain or on domain that enabled CORS.
To create favicon loader using GIF file, you need to include parseGIF.js file:
`html`
then init the library with GIF options, that point to GIF file (the GIF file is not scaled to match favicon,
and was not tested on big GIF files).
`javascript`
favloader.init({
gif: 'loader.gif'
});
From version 0.4.0 you can use custom canvas animation
`javascript`
var p = 0;
var reversed = false;
var width = 2;
var size = 32;
favloader.init({
size: size,
frame: function(ctx) {
ctx.fillStyle = '#F00A0A';
ctx.fillRect(p, 0, width, size);
if (reversed) {
p--;
if (p === 0) {
reversed = false;
}
} else {
p++;
if (p === size - width) {
reversed = true;
}
}
}
});
Start animating
`javascript`
favloader.start();
`javascript`
favloader.stop();
Looks best if you don't have lot of tabs or if you do when tab is not in focus.
To restore the icon properly, after stop, you need to include default favicon:
`html``
Copyright (c) 2018-2019 Jakub T. Jankiewicz
Released under the MIT license