Notifications

Notification and custom alerts
  1. Home
  2. UI Elements
  3. Notifications

Notification Styles Inspiration

Notification Styles Inspiration Simple ideas & effects for website notifications

Examples Action
.... Notification Styles "Scale"....
Jelly
Slide in
Genie
Flip
Bouncy Flip
Examples Action
Slide On Top
Expanding Loader
Corner Expand
Loading Circle
Box Spinner
Thumb Slider

Sweet Alert

A beautiful replacement for JavaScript's "Alert"

Examples Action
A basic message 
swal("Here's a message!", "It's pretty, isn't it?")
A success message! 
swal("Good job!", "You clicked the button!", "success")
A warning message, with a function attached to the "Confirm"-button 
swal({
  title: "Are you sure?",
  text: "You will not be able to
 recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
},
function(){
  swal("Deleted!", "Your imaginary file
 has been deleted.", "success");
});
... and by passing a parameter, you can execute something else for "Cancel". 
swal({
  title: "Are you sure?",
  text: "You will not be able to
 recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary
 file has been deleted.", "success");
  } else {
	    swal("Cancelled", "Your 
imaginary file is safe :)", "error");
  }
});
A message with a custom icon 
swal({
  title: "Sweet!",
  text: "Here's a custom image.",
  imageUrl: "images/thumbs-up.jpg"
});

Toastr

toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.

Examples Action
Toastr example with info
Toastr example with success
Toastr example with warning
Toastr example with danger 

Command: toastr["success"]("Example message ", "Example title")

toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-center",
  "preventDuplicates": false,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}