Skip to content

progress-bar-toast-indicator

The progress-bar-toast-indicator is a user interface feature within the toastr notification library designed to visualize the remaining time before a notification automatically closes.^[600-developer__frontend__js-plugin__js-plugin.md] This component provides a visual representation of the time-out duration, enhancing user awareness regarding the persistence of the alert.^[600-developer__frontend__js-plugin__js-plugin.md]

Configuration

In the toastr options object, this feature is controlled by the progressBar property^[600-developer__frontend__js-plugin__js-plugin.md].

  • Property: progressBar
  • Type: Boolean
  • Default: false (hidden)
  • Behavior: When set to true, the visual progress bar is displayed; otherwise, it remains hidden^[600-developer__frontend__js-plugin__js-plugin.md].

The behavior of the progress bar is linked to the timeOut configuration option^[600-developer__frontend__js-plugin__js-plugin.md].

  • timeOut: Defines the duration in milliseconds that the toast remains visible before hiding. The progress bar visually depletes according to this setting^[600-developer__frontend__js-plugin__js-plugin.md].

Code Example

toastr.options = {
    "progressBar": true, // Displays the time progress bar
    "timeOut": "5000"    // Toast hides after 5000 milliseconds
};

Sources

  • 600-developer__frontend__js-plugin__js-plugin.md