Replace Favicon With A Loading Indicator In The Browser Tab – favloader

favloader is a vanilla JavaScript plugin that replaces the favicon with a customizable loading spinner when needed.

Can be used to indicate the page state when something is being loaded into the document.

How to use it:

Download and insert the favloader.js script into the document.

<script src="favloader.js"></script>

Initialize the plugin.

favloader.init();

The JavaScript to show/hide the loading spinner.

favloader.start();
favloader.stop();

Customize the color of the loading spinner.

favloader.init({
  color: '#0F60A8'
});

Customize the stroke width of the loading spinner.

favloader.init({
  line_width: 2
});

Customize the size of the favicon.

favloader.init({
  favicon_size: 16
});

Customize the duration of the animation.

favloader.init({
  duration: 5000
});

The library also supports GIF favicon. Requires the parseGIF.js library.

favloader.init({
  gif: 'loader.gif'
});

Changelog:

05/23/2021

• fix prototype pollution vulnerability in worker RPC

11/21/2019

• v0.4.4: fix multiple start before init

11/04/2019

• v0.4.3: handle stop/start without init

01/08/2019

• v0.4.2: add clear animation on init

01/08/2019

• canvas animation

01/05/2019

• fix for Mac/Chrome