amatic.js

Simple and beautiful ajax notifications/loaders

Amatic.js Ajax notification/loader made easy
https://reandimo.github.io/amatic.js/
amatic.js is a cool and customizable notification for an ajax event.

Basic Usage

1. Include the script and stylesheet on your document's , Font-Awesome and jQuery are required for this plugin:

  <link rel="stylesheet" href="amatic.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.amatic.js"></script>

2. To initialize the plugin:

$(document).ready(function(){
        $.amatic();
      });

3. Syntax:

$.amatic( [CSS RULES], [OPTIONS] );

4. You can define new CSS Rules for the notification/loader like this:

var css = { backgroundColor: "black", color: "white" };

$.amatic(css);

Or:

$.amatic({backgroundColor: "black", color: "white" });

5. And modify the options avaiables:

$.amatic(css, {
	newClass: "super-class",										
	fadeIn: false
});

6. Animations:

 
$.amatic(css, {
	animateIn: "bounceInUp", 
	animateOut: "bounceOutDown"
});

Options

Name	Type	Default	Description
newClass	string	null	Define a new class for notification/loader
loader	string	fa fa-circle-o-notch	Define the class of the icon to display (Font Awesome is Default)
completeIcon	string	fa fa-check	Define the class of the icon to display (Font Awesome is Default)
fadeIn	boolean	true	Activate/Desactivate fade in at the start of notification/loader
fadeOut	boolean	true	Activate/Desactivate fade out at the start of notification/loader
animateIn	string	null	The class of the animation to display  (animate.css required)
animateOut	string	null	The class of the animation to hide (animate.css required)
timeOut	time	2000 (2 seconds)	The time of the notification/loader to be displayed
beforeLoader	callback	null	Callback before the loader is displayed
afterLoader	callback	null	Callback after the loader is displayed

License

Amatic.js is licensed under the MIT license. (http://opensource.org/licenses/MIT)