Display progress in your page's favicon!
fav-progress-icon is a small JS library for switching favicon images to represent a value from the 0.0 to 1.0 range. The images are prepared in advance which puts more work on you but provides compatibility with IE (the newer versions at least) and allows for completely custom progress visualization.
// Use 33 files from the "icons" directory.
// The files are named: 0.png, 1.png ... 32.png
var fav_progress_icon = new FavProgressIcon(33, 'icons/');
fav_progress_icon.setValue(0.0);
fav_progress_icon.setValue(0.15);
fav_progress_icon.setValue(0.333);
fav_progress_icon.setValue(0.5); // Half-way there.
// ...
fav_progress_icon.setValue(1.0); // Task finished!
// Restore the original favicon:
fav_progress_icon.remove();
Use the provided icon generator.
Or create the images yourself. They need to be 16x16 PNGs named: 0.png, 1.png,... The number of the images is up to you, just make sure to provide it to the FavProgressIcon constructor.
- Chrome,
- Firefox,
- Internet Explorer 11+,
- Opera.
Probably others as well.
Inspired by Piecon (actually, the goal of this project is to create a Piecon that works in IE).
Copyright 2015 Marcin Simonides, licensed under the MIT License.