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

Category: Javascript , Loading | February 9, 2019
Author: jcubic
Views Total: 299
Official Page: Go to website
Last Update: February 9, 2019
License: MIT

Preview:

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

Description:

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:

01/08/2019

  • v0.4.2: add clear animation on init

01/08/2019

  • canvas animation

01/05/2019

  • fix for Mac/Chrome

You Might Be Interested In:


Leave a Reply