Version: 1.0.0.
Author: 95stefano.gagliardi@gmail.com
License: MIT

Try demo here ! Demo

The following plugin is based on jquery. The default icons are those of FontAwesome 5 (solid).

• jQuery (minimum) version v 1.12.4 Site - License
• Font Awesome 5 Site - License

Inclusion via js

<script src="/magicBtn.js"></script>

Inclusion via compiled css

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

Inclusion via .scss

@import "magicBtn";

/**
 * @param string selector - Target
 * @param obj options - Options to customize plugins
 */
 
$.magicBtn(selector,options);

1. The first parameter represents the container on which the plugin will take effect. By default the scope is global (on all the document).
2. The second parameter is an object, which contains the initialization options.

You can initialize the plugin with the following options:

options = {
    buttonType: 'type', // 'material','outline'
    rounded: false, // (bool) - add class '.round', border-radius: 5px
    fill: false // Just for 'outline', fill effect on button:hover
}

var options = {
    loadginText: 'Your loading text',
    loadingIcon: bool(true),
    icon: '<i></i>'
}  
  
$('#selector').startLoading(options);

Options of this method

• The initial text is saved as an attribute: <button data-initial-text="$text">$text</button>.
• Append text.
• If the 'icon' option is true then the html string is hung.

var options = { 
    initialText: data-initial-text
    status: '',//One of success, warning, error. Empty for default.
}
  
$('#selector').resultLoading(options);

There may be four types of results:

1. success:
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
2. warning
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
3. error
   • statusText: 'Result text'
   • statusIcon: ''
   • disalbed: bool(false)
4. Default: The initial text saved by attribute with the method is returned startLoading();

var options = {
    text: 'Your custom text for the button'
}  
  
$('#selector').removeLoading(options);

Actions of this mehod

• text: data-initial-text
• remove class: 'success','warning' or 'error'

var options = {}  
  
$('#selector').disabled(options);

Actions of this mehod

• Add class 'disabled'
• Add attribute 'disabled'

The button has 100% width.

  <button class="block"></button>

If the loading icons are static, just add the rotating class.

  $(selector).startLoading({
    'icon': '<i class="fas fa-cog rotating"></i>'
  })

Elect errors that are returned by the plugin:

1. resultLoading(); If multiple states are initialized as true, returns an error can be just one (success, warning, error).