Notifications

Notification and custom alerts

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 is a beautiful replacement for standard Javascript's "Alert".

Examples Action
A basic message
A success message!
A warning message, with a function attached to the "Confirm"-button
... and by passing a parameter, you can execute something else for "Cancel".

You can easy add sweet alert in your controller by adding code like this:

                        swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!',
                        cancelButtonText: 'No, cancel!',
                        confirmButtonClass: 'btn btn-success',
                        cancelButtonClass: 'btn btn-danger',
                        buttonsStyling: false
                    })

Minimalistic and extensible notification service for toastr.

Example with toastr


You can easy add any notification in your scripts by adding code like this: 

                    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"
                }