Create Animated Progress Showing Favicon Like Pie Charts

Create Animated Progress Showing Favicon Like Pie Charts, sounds odd but there is no way to describe this cute function that adds a virtual progress bar in Pie. Chrome, Firefox and Opera currently supports these feature and trick.

How Create Animated Progress Showing Favicon Like Pie Charts

Its quite easy to create animated progress showing favicon like Pie Charts. Basically we will just show the usage of small Open Source javascript, its alteration and how to use it. The official name is Piecon – Pie charts in your favicon. It look like this while the webpage loading :

Create Animated Progress Showing Favicon Like Pie Charts : Guide, Tips and Resources

Go to this webpage :

Download the file named piecon.js. Open it any text editor with syntax highlighting feature like Gedit, it will look like this :

(function(){
var Piecon = {};

var currentFavicon = null;
var originalFavicon = null;
var originalTitle = null;
var canvas = null;
var options = {};
var defaults = {
color: ‘#ff0084‘,
background: ‘#bbb‘,
shadow: ‘#fff‘,
fallback: false
};

var ua = (function () {
var agent = navigator.userAgent.toLowerCase();
return function (browser) {
return agent.indexOf(browser) !== -1;
};
}());

var browser = {
ie: ua(‘msie’),
chrome: ua(‘chrome’),
webkit: ua(‘chrome’) || ua(‘safari’),
safari: ua(‘safari’) && !ua(‘chrome’),
mozilla: ua(‘mozilla’) && !ua(‘chrome’) && !ua(‘safari’)
};

var getFaviconTag = function() {
var links = document.getElementsByTagName(‘link’);

for (var i = 0, l = links.length; i < l; i++) {
if ((links[i].getAttribute(‘rel’) || ”).match(/biconb/)) {
return links[i];
}
}

return false;
};

var removeFaviconTag = function() {
var links = document.getElementsByTagName(‘link’);
var head = document.getElementsByTagName(‘head’)[0];

for (var i = 0, l = links.length; i < l; i++) {
if (typeof(links[i]) !== ‘undefined’ && links[i].getAttribute(‘rel’) === ‘icon’) {
head.removeChild(links[i]);
}
}
};

var setFaviconTag = function(url) {
removeFaviconTag();

var link = document.createElement(‘link’);
link.type = ‘image/x-icon’;
link.rel = ‘icon’;
link.href = url;

document.getElementsByTagName(‘head’)[0].appendChild(link);
};

var getCanvas = function () {
if (!canvas) {
canvas = document.createElement(“canvas”);
canvas.width = 16;
canvas.height = 16;
}

return canvas;
};

var drawFavicon = function(percentage) {
var canvas = getCanvas();
var context = canvas.getContext(“2d”);
var percentage = percentage || 0;
var src = currentFavicon;

var faviconImage = new Image();
faviconImage.onload = function() {
context.clearRect(0, 0, 16, 16);

// Draw shadow
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2), 0, Math.PI * 2, false);
context.fillStyle = options.shadow;
context.fill();

// Draw background
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) – 2, 0, Math.PI * 2, false);
context.fillStyle = options.background;
context.fill();

// Draw pie
if (percentage > 0) {
context.beginPath();
context.moveTo(canvas.width / 2, canvas.height / 2);
context.arc(canvas.width / 2, canvas.height / 2, Math.min(canvas.width / 2, canvas.height / 2) – 2, (-0.5) * Math.PI, (-0.5 + 2 * percentage / 100) * Math.PI, false);
context.lineTo(canvas.width / 2, canvas.height / 2);
context.fillStyle = options.color;
context.fill();
}

if (context) {
setFaviconTag(canvas.toDataURL());
}
};

// allow cross origin resource requests if the image is not a data:uri
// as detailed here: https://github.com/mrdoob/three.js/issues/1305
if (!src.match(/^data/)) {
faviconImage.crossOrigin = ‘anonymous’;
}

faviconImage.src = src;
};

var updateTitle = function(percentage) {
if (options.fallback) {
if (percentage > 0) {
document.title = ‘(‘ + percentage + ‘%) ‘ + originalTitle;
} else {
document.title = originalTitle;
}
}
};

Piecon.setOptions = function(custom) {
options = {};

for (var key in defaults){
options[key] = custom.hasOwnProperty(key) ? custom[key] : defaults[key];
}

return this;
};

Piecon.setProgress = function(percentage) {
if (!originalTitle) {
originalTitle = document.title;
}

if (!originalFavicon || !currentFavicon) {
var tag = getFaviconTag();
originalFavicon = currentFavicon = tag ? tag.getAttribute(‘href’) : ‘/favicon.ico’;
}

if (!isNaN(parseFloat(percentage)) && isFinite(percentage)) {
if (!getCanvas().getContext || browser.ie || browser.safari || options.fallback == true) {
// Fallback to updating the browser title if unsupported
return updateTitle(percentage);
} else if (options.fallback === ‘force’) {
updateTitle(percentage);
}

return drawFavicon(percentage);
}

return false;
};

Piecon.reset = function() {
if (originalTitle) {
document.title = originalTitle;
}

if (originalFavicon) {
currentFavicon = originalFavicon;
setFaviconTag(currentFavicon);
}
};

Piecon.setOptions(defaults);
window.Piecon = Piecon;
})();

The reason to write the whole code is to show the variables. The red colored text can be altered according to your choice for showing the color of the pie chart. If you read the code’s comments, you will understand it is not very difficult to change for customizing the look.

Save it. Now the implementation part. If you place javascript at root of your server, add this code within header tag :

So, to create animated Progress Showing Favicon Like Pie Charts, you have to add it within the header tag. Change the script src to full url in case you have you have placed it in subfolder or a CDN. You can optimize the script by minifying it after modification and saving using any online tools to minify js. We said ” virtual progress bar” in the description as its actually not related to page loading progress. It will work for any webpage including free Blogger, Hosted WordPress or any HTML webpage where javascript can be added.