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="/?originalUrl=https%3A%2F%2Fwww.jqueryscript.net%2F%26quot%3B%2F%2Fcode.jquery.com%2Fjquery-3.2.1.slim.min.js%26quot%3B%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Bscript%2520src%3D%26quot%3Bsrc%2Fjs%2Fgobutton.js%26quot%3B%2520%26gt%3B%26lt%3B%2Fscript%26gt%3B%26lt%3Blink%2520rel%3D%26quot%3Bstylesheet%26quot%3B%2520href%3D%26quot%3Bsrc%2Fcss%2Fgobutton.css%26quot%3B%26gt%3B%253C%2Fpre">
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.





Prev: Simple Lazy Image Loader Plugin With jQuery - lazyLoad.js 
Next: Animated SVG Progress Bar For jQuery/JavaScript/Angular