Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jcubic/favloader
Vanilla JavaScript library for loading animation in favicon
https://github.com/jcubic/favloader
animation canvas favicon gif loader timer vanilla-javascript-library
Last synced: about 2 months ago
JSON representation
Vanilla JavaScript library for loading animation in favicon
- Host: GitHub
- URL: https://github.com/jcubic/favloader
- Owner: jcubic
- License: mit
- Created: 2018-12-05T17:47:10.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-04T12:40:24.000Z (over 3 years ago)
- Last Synced: 2024-10-26T19:49:09.910Z (2 months ago)
- Topics: animation, canvas, favicon, gif, loader, timer, vanilla-javascript-library
- Language: JavaScript
- Homepage: https://jcubic.github.io/favloader/
- Size: 59.6 KB
- Stars: 24
- Watchers: 5
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# favloader
[](https://www.npmjs.com/package/favloader)
[](https://github.com/jcubic/favloader/blob/master/LICENSE)
[Vanilla JavaScript library for loading animation in favicon that work when tab is not active](https://github.com/jcubic/favloader).
See [Demo](https://jcubic.github.io/favloader/)
## 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:
```html
```
you can also get the file from unpkg.com:
```html
```
## API
Initialization
```javascript
favloader.init({
size: 16,
radius: 6,
thickness: 2,
color: '#0F60A8',
duration: 5000
});
```
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:
```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'
});
```
## Custom canvas animation
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;
}
}
}
});
```
## Animation
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.
## Limitation
To restore the icon properly, after stop, you need to include default favicon:
```html
```
## 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
Released under the MIT license