Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
favloader
Advanced tools
Readme
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:
<script src="favloader.js"></script>
you can also get the file from unpkg.com:
<script src="https://unpkg.com/favloader@0.x.x"></script>
Initialization
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:
<script src="https://unpkg.com/favloader@0.x.x/parseGIF.js"></script>
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.init({
gif: 'loader.gif'
});
From version 0.4.0 you can use custom canvas animation
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
favloader.start();
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:
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
Copyright (c) 2018-2019 Jakub T. Jankiewicz https://jcubic.pl/me
Released under the MIT license
FAQs
Favicon Vanilla JavaScript loader animation that work when tab is not active
The npm package favloader receives a total of 277 weekly downloads. As such, favloader popularity was classified as not popular.
We found that favloader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.