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" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="dist/jquery.thrive.min.js"></script>

3. Initialize the loading indicator on a given button.

<button type="button" class="progress">
  Submit
</button>

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%
myThrive.progress(.6);

---

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