Piecon is a tiny JavaScript library that dynamically generates progress pie charts as favicons. It allows developers to display real-time progress or status information directly in the browser tab, providing a subtle yet effective way to communicate updates to users without requiring them to focus on the page content.

Pros

• Lightweight and easy to integrate into existing projects
• Provides a non-intrusive way to display progress information
• Customizable appearance, including colors and size
• Works across modern browsers

Cons

• Limited to circular progress indicators only
• May not be visible on mobile devices or small screens
• Requires JavaScript to be enabled in the browser
• Potential for favicon caching issues in some browsers

Code Examples

1. Basic usage:

Piecon.setProgress(50);

This sets the favicon to display a 50% progress pie chart.

2. Customizing colors:

Piecon.setOptions({
  color: '#ff0000',
  background: '#ffffff'
});

This changes the progress color to red and the background to white.

3. Resetting the favicon:

Piecon.reset();

This resets the favicon to its original state.

Getting Started

1. Include the Piecon library in your HTML:

<script src="https://cdn.jsdelivr.net/npm/piecon@0.5.0/piecon.min.js"></script>

2. Initialize Piecon with your desired options:

Piecon.setOptions({
  color: '#ff6700',
  background: '#bbb',
  shadow: '#fff',
  fallback: false
});

3. Update the progress as needed in your application:

function updateProgress(percent) {
  Piecon.setProgress(percent);
}

Now you can call updateProgress(50) to set the favicon to 50% progress, for example.