Create Toast Notifications With Countdown Bars And Smooth Animations

A toast notification is an alert to the user that appears outside of the current app based on time and context criteria.

The purpose of the jQuery plugin is to provide a quick way to create custom Android-style toast notifications with countdown bars and smooth slide in/out animations.

It is really easy to use and can be used in mobile websites or even single page applications with ease.

How to use it:

1. Load the main stylesheet in the head section of the document.

<link rel="stylesheet" href="css/styles.css">

2. Code the HTML for the toast notification.

<div id="toast" class="toast">
  <div class="toast-content">
    <!-- Notification Icon -->
    <i class="icon">
    </i>
    <div class="menssagem">
      <!-- Default Message -->
      <span class="text text-1">sucess</span>
      <span class="text text-2">Salvo com sucesso</span>
    </div>
  </div>
  <!-- Close Button -->
  <i class="icon-close">
    <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
  </i>
  <!-- Progress Bar -->
  <div class="progress">
  </div>
</div>

3. Load the latest jQuery JavaScript library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. The main JavaScript for the toast notification.

var toast_notification = {
    // show toast
    show_toast:function ({title, message, time, type}) {
      var container_icon = $('#toast .icon');
      var progress = $('#toast .progress');
      var toast = $('#toast')
      $(toast).addClass('visible');
      $(progress).addClass('visible');
      toast_notification.addMessage(title, message);
      var root = document.documentElement;
      switch (type) {
        case 'success':
          var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path></svg>')
              $(toast).addClass('type-success');
              $(toast).removeClass('type-error');
              $(toast).removeClass('type-warning');
  
              break
        case 'error':
              var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                  $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>')
              $(toast).addClass('type-error');
              $(toast).removeClass('type-success');
              $(toast).removeClass('type-warning');
              break
        case 'warning':
              var existMoreone = $(container_icon).find('svg').length;
              if (existMoreone > 0) {
                $(container_icon).find('svg').remove();
              }
              $(container_icon).prepend('<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M228.9 79.9L51.8 403.1C40.6 423.3 55.5 448 78.9 448h354.3c23.3 0 38.2-24.7 27.1-44.9L283.1 79.9c-11.7-21.2-42.5-21.2-54.2 0zM273.6 214L270 336h-28l-3.6-122h35.2zM256 402.4c-10.7 0-19.1-8.1-19.1-18.4s8.4-18.4 19.1-18.4 19.1 8.1 19.1 18.4-8.4 18.4-19.1 18.4z"></path></svg>')
              $(toast).removeClass('type-error');
              $(toast).removeClass('type-success');
              $(toast).addClass('type-warning');
              break
        }
        root.style.setProperty('--time-animation', time+'s');
        var timeNormal = time * 1000;
        var timeWithdoutAnimation = time * 1000 + 300;
        setTimeout(function() {
          $(toast).removeClass('visible');
        }, timeNormal)
        setTimeout(function() {
          $(progress).removeClass('visible');
        },timeWithdoutAnimation)    
    },
    // add toast message
    addMessage: function (titleP, messageP) {
        var title = $('#toast .menssagem .text-1');
       // console.log($(title).text())
        var message = $('#toast .menssagem .text-2');
        $(title).text(titleP);
        $(message).text(messageP);
    },
    // close toast message
    close_toast:function () {
      var progress = $('#toast .progress');
      $('.toast .icon-close').click(function() {
        var taost_atual = $(this).closest('.toast')
        $(taost_atual).removeClass('visible');
        setTimeout(function() {
          $(progress).removeClass('visible');
        },300)
      })
    }
}

5. Show toast notifications on the page.

// Error Toast
toast_notification.show_toast({

  // title
  title: 'Error', 

  // toast message
  message: 'Error Message', 

  // auto dismiss after 10 seconds
  time: 10, 

  // notification type
  type: 'error',

});

// Success Toast
toast_notification.show_toast({
  title: 'Success', 
  message: 'Success Message', 
  time: 3, 
  type: 'success',
})

// Warning Toast
toast_notification.show_toast({
  title: 'Warning', 
  message: 'Warning Message', 
  time: 30, 
  type: 'warning',
})

---

This awesome jQuery plugin is developed by hudsonlhMartins. For more Advanced Usages, please check the demo page or visit the official website.