Button Progress Indicator With jQuery - Thrive

File Size: 9.08 KB
Views Total: 1941
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Button Progress Indicator With jQuery - Thrive

Thrive is a lightweight jQuery plugin to create a button progress indicator (aka Ladda Button) that displays the current loading progress in an inline button. Ideal for submit/subscription/upload buttons.

How to use it:

1. Load the stylesheet jquery.thrive.min.css for the basic styling of the button progress indicator.

<link href="dist/jquery.thrive.min.css" rel="stylesheet">

2. Load the JavaScript jquery.thrive.min.js after jQuery but before the </body> tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="dist/jquery.thrive.min.js"></script>

3. Initialize the loading indicator on a given button.

<button type="button" class="progress">
var myThrive = $('.progress').thrive();

4. Change the default style of the button loading indicator:

  • Default
  • Slick
  • Stripe
var myThrive = $('.progress').thrive({
    style: 'default'

5. Determine whether or not to show the loading spinner inside the button when processing.

var myThrive = $('.progress').thrive({
    spin: true

6. Replace the button text with a custom loading text.

var myThrive = $('.progress').thrive({
    sig: 'Loading..'

7. Callback functions available.

var myThrive = $('.progress').thrive({
    pre: function(){
      console.log('Progress started');
    post: function(){
      console.log('Progress completed');

8. Update the loading progress.

// 60%

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