jQuery Plugin For Fancy Animated Loading Button - GoButton

File Size: 21.2 KB
Views Total: 5819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:


4. Config the animation with the following options.


  // 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.


  onStop: null,
  onStart: null,
  onAnimationStop: null,
  onAnimationStart: null

6. API methods.

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

// starts the animation

// stops the animation

// runs an infinite animation

// 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.