Animated Favicon Progress Bar – FavIconX

FavIconX is a pure JavaScript library that displays an animated, highly customizable progress bar as the favicon on your browser tab.

Basic usage:

Load the FavIconX JavaScript library at the bottom of the document so the pages load faster.

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

Create a basic favicon progress bar.

FavIconX.setValue(40); // 40%

Configuration options with default values.

FavIconX.config({
  // 'circle' (default), 'doughnut', or 'square'
  shape = 'circle'; 
  // enable animation
  animated = false;
  // animation speed in ms
  animationSpeed = 2000;
  // animation callback
  animCallback = null;
  // border color
  borderColor = '#3A70B1';
  // border color at max value
  borderColor2 = null;
  // shadow color
  shadowColor = 'rgba(255, 0, 0, 0)';
  // border width
  borderWidth = 1;
  // fill color
  fillColor = '#3A70B1';
  // fill color at max value
  fillColor2 = null;
  // enable / disable title modifications
  updateTitle = true;
  // percentage value between 0 and 100
  value = 0;
  // used to configure how the tab title is rendered. 
  titleRenderer = function(val, title){
      return '[' + val + '%] - ' + title;
  };
}).setValue(Value, Animated, AnimationSpeed, Callback]);

Public API.

// Returns the current value as displayed in the tab.
// If the icon is currently being animated, it returns the intermediate value, not the destination value.
FavIconX.getValue()
// Resets the configuration to its default properties and recovers the initial favicon.
FavIconX.reset()
// Sets the favicon to a success check icon.
// foreColor(optional) : the shape color (defaults to '#FFFFFF').
// backColor(optional) : the circle color (defaults to '#53C516').
FavIconX.complete([foreColor], [backColor])
// Sets the favicon to a failure cross icon.
// foreColor(optional) : the shape color (defaults to '#FFFFFF').
// backColor(optional) : the circle color (defaults to '#F6491F').
FavIconX.fail([foreColor], [backColor])