jQuery Plugin For Fancy Animated Loading Button - GoButton

GoButton is a very small jQuery plugin that applies a fancy, configurable, CSS3 based loading animation to your loading/action buttons when clicked.

How to use it:

1. Add references to jQuery library and the GoButton plugin's files:

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="src/js/gobutton.js" ></script>
<link rel="stylesheet" href="src/css/gobutton.css">

2. Create a normal button on the webpage.

<button class="">Loading</button>

3. Apply a basic loading animation to the button:

$('button').gobutton();

4. Config the animation with the following options.

$('button').gobutton({

  // button size
  size: '100',

  // button color
  color: '#25CED1',

  // space between button and loader
  loaderGap: '6',

  // loader color
  loaderColor: '#25CED1',

  // loader width
  loaderWidth: '3',

  // infinite spin
  infiniteSpin: false,

  // animation speed
  animationSpeed: 2.5,
  

  // additional CSS class(es)
  classes: '',

  // disable/enable
  disable: false
  
});

5. Callback functions available.

$('button').gobutton({

  onStop: null,
  onStart: null,
  onAnimationStop: null,
  onAnimationStart: null
  
});

6. API methods.

myButton = $('button').gobutton({
  // options here
});

// starts the animation
myButton.start();

// stops the animation
myButton.stop();

// runs an infinite animation
myButton.infiniteStart(speed);

// changes options
myButton.changeOption(nameOrOptions, valueOrNothing || {})

---

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