Customizable Toast Notifications with Burning Fuse Countdown Animations – FuseNotify

FuseNotify is a lightweight JavaScript notification library that creates toast-style messages with a unique burning fuse countdown animation.

You can use this library to display clean, non-blocking success or error messages to the user anywhere on the screen.

Features:

• Success and error notification types: Pre-configured styling for common notification scenarios.
• Burning fuse countdown animation: Visual representation of remaining display time through animated progress bars.
• Four positioning options: Support for top-right, top-left, bottom-right, and bottom-left placement.
• Configurable display duration: Customizable auto-dismiss timing in milliseconds.
• Manual dismissal support: Close button functionality alongside automatic timeout.

Use cases:

• Form Submission Feedback: Instantly tell users if their form was submitted successfully or if there was a validation error.
• Asynchronous Action Status: Notify users when an async operation, like saving data or fetching a resource, completes. The non-blocking nature means the user can continue interacting with the page.
• General UI Alerts: Provide simple confirmations for actions like “Item deleted,” “Settings saved,” or “File uploaded.” It’s a great replacement for the native alert() function.
• Single-Page Application (SPA) Events: In React or Vue apps, you can trigger notifications for various application events without needing a complex state management solution for simple feedback messages.

How to use it:

1. Download the library and load the following files in your HTML document.

<link rel="stylesheet" href="fusenotify.css" />
<script src="fusenotify.js"></script>

2. Call the FuseNotify from anywhere in your JavaScript. The library exposes a global FuseNotify object with two methods: success() and error().

• message: The string of text you want to display.
• duration: A number in milliseconds that determines how long the notification is visible before it auto-dismisses. The default is 4000.
• position: A string that sets the screen location. It accepts top-right, top-left, bottom-right, or bottom-left. The default is top-right.

FuseNotify.success(message, duration, position);
FuseNotify.error(message, duration, position);

<button onclick="FuseNotify.success('Top Right Success!', 4000, 'top-right')">Top Right</button>
<button onclick="FuseNotify.error('Top Left Error!', 4000, 'top-left')">Top Left</button>
<button onclick="FuseNotify.success('Bottom Right Success!', 4000, 'bottom-right')">Bottom Right</button>
<button onclick="FuseNotify.error('Bottom Left Error!', 4000, 'bottom-left')">Bottom Left</button>

3. For React applications, you can include the files in your public/index.html or import them directly into your main component if your setup supports it. Since FuseNotify attaches itself to the window object, you can call it directly from your event handlers.

import React from 'react';
// Make sure fusenotify.js and fusenotify.css are included in your project's entry point or public HTML.
function App() {
  const showSuccess = () => {
    window.FuseNotify.success("React notification works!", 4000, "top-right");
  };
  const showError = () => {
    window.FuseNotify.error("Something went wrong.", 4000, "bottom-left");
  };
  return (
    <div>
      <button onClick={showSuccess}>Success</button>
      <button onClick={showError}>Error</button>
    </div>
  );
}

How it works:

The burning fuse effect combines two animation layers. The background layer creates a moving shimmer effect using CSS gradients and transforms, while the foreground fill element shrinks from full width to zero over the specified duration. Success notifications use a white fuse line, while error notifications display a gradient from orange to red that mimics actual fire colors.

Notification removal happens through two mechanisms: automatic timeout using setTimeout() and manual dismissal through close button click events. The library automatically removes notification elements from the DOM to prevent memory accumulation during long-running sessions.

FAQs:

Q: Can multiple notifications display simultaneously?
A: Yes, FuseNotify supports multiple concurrent notifications. Each notification renders independently with its own countdown timer and dismissal behavior. Notifications stack vertically within their positioned containers.

Q: How can I customize the notification appearance?
A: Modify the CSS file to adjust colors, fonts, spacing, or animation effects. The library uses CSS classes like .fusenotify-success and .fusenotify-danger for easy customization. You can override these styles in your own CSS files.

Q: Can I prevent automatic dismissal for critical notifications?
A: Set the duration parameter to a very high value (like 300000 for 5 minutes) to disable auto-dismissal while keeping the close button functional. The library doesn’t currently support permanent notifications without timeout values.

Related Resources:

• 10 Best Toast Notification JavaScript Libraries