favloader

favloader is a lightweight vanilla JavaScript library designed to create loading animations in the favicon of a web browser tab, ensuring that users are notified even when the tab is not active. Developed to tackle the limitations of standard animations in the main threading environment of browsers, favloader employs web workers to maintain active timing regardless of user interactions with the browser.

Key Features

• Responsive Animations: Use custom animations for the favicon that remain functional even when the user switches tabs.
• GIF Support: From version 0.3.0 onwards, the library supports animating GIFs for browsers that typically do not allow GIF files to be used as favicon links. This feature utilizes AJAX alongside the canvas for animation, requiring CORS-enabled resources.
• Custom Animation Framework: With the release of version 0.4.0, users can implement their unique canvas animations, expanding the possibilities for favicon customization.

Implementation Overview

Basic initialization of favloader can be achieved with the following example:

favloader.init({
    size: 16,
    radius: 6,
    thickness: 2,
    color: '#0F60A8',
    duration: 5000
});

Start and stop the animation easily with the methods provided:

favloader.start();
favloader.stop();

Usage Scenarios

favloader is particularly useful for applications that involve lengthy computations, providing visual feedback to users whenever the application is processing data. With this library, users can remain informed even if they switch between different tabs in their browser, enhancing their overall experience.

For more details and a live demo, visit the Demo Page.