Animated Favicon Progress Bar – FavIconX

Category: Javascript , Loading | November 30, 2015
Author: nicolasbize
Views Total: 3,287
Official Page: Go to website
Last Update: November 30, 2015
License: MIT

Preview:

Animated Favicon Progress Bar – FavIconX

Description:

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])

 

You Might Be Interested In:


One thought on “Animated Favicon Progress Bar – FavIconX

Leave a Reply