favloader
Vanilla JavaScript library for loading animation in favicon that work when tab is not active
See Demo
Why this library
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.
Installation
You can using webpack to include the files (using require
) use local file in script tag:
you can also get the file from unpkg.com:
API
Initialization
favloader;
All options are optional (those are the defaults).
Gif support
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:
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).
favloader;
Custom canvas animation
From version 0.4.0 you can use custom canvas animation
var p = 0;var reversed = false;var width = 2;var size = 32;favloader;
Animation
Start animating
favloaderstart;
favloader;
Looks best if you don't have lot of tabs or if you do when tab is not in focus.
Limitation
To restore the icon properly, after stop, you need to include default favicon:
Changelog
0.4.4
- allow of multiple start before initialization
0.4.3
- throw error when calling start before init
0.4.2
- fix clear of animation when calling init when animation is running
0.4.1
- README fix
- add parseGIF.min.js file
0.4.0
- canvas animation
0.3.1
- fix for MacOSX/Chrome
- fix initialization before DOM is ready
0.3.0
- GIF animation support
0.2.2
- option fix
0.2.1
- npm fix
0.2.0
- make it work without onload
- change API options
0.1.0
- inital version
License
Copyright (c) 2018-2019 Jakub T. Jankiewicz https://jcubic.pl/me
Released under the MIT license