jquery.thrive
Yet another full-fledged jQuery progress indicator button plugin with bare minimum code (1831 Bytes only, js: 643 Bytes, css: 1188 Bytes).
Dependency
Since it is a jQuery plugin; jQuery library should be included on prior.
Installation
Include jquery.thrive.min.css
from dist folder.
<link rel="stylesheet" href="./dist/jquery.thrive.min.css">
Include jquery.thrive.min.js
from dist folder.
<script src="./dist/jquery.thrive.min.js"></script>
Initiate the plugin.
var thrive = $('.target').thrive();
Thats all. Your target button is now thrive.
npm? npm i jquery.thrive
Usage
To see the progress in thrive button all you need to do is push the progress into it.
thrive.progress(value);
Note:
-
The value is the progress of some process. Note that the value is in scale of
0
to1
which will be converted to%
value within the plugin. So, don't pass percent value directly. For example, a progress of73%
reprecents the value to be0.73
. -
It is required to define your button for thrive in
<button>...</button>
tag. thrive doesn't work with<input>
buttons.
Examples
A complete demo page is located here:
[todo]
You can also experience the look of thrive here. (plugin not used, only core code is used for demo): https://codepen.io/effone/pen/VVwpaK
Options
-
style (string): thrive supports progress bar styling out of the box. There are three styles in-built : 'default', 'slick' and 'stripe'. This can be extended through CSS, ofcourse. You have to define the style name in settings, in any other case default style will be loaded.
var thrive = $('.target').thrive({ style: 'stripe' });
-
spin (bool): set
true
orfalse
to show or hide a spinner inside the button indicating working on background. Default value istrue
.var thrive = $('.target').thrive({ spin: false });
-
sig (string): You can define an alternative button text to show while progressing.
var thrive = $('.target').thrive({ sig: 'Uploading...' });
Callback
You can define your own callback functions for thrive. There are two callbacks that can be executed: pre
and post
. pre
gets executed before starting progress and post
gets executed after completing progress.
You can define callbacks this way:
var thrive = $('.target').thrive({ pre: function(){ console.log('Progress started'); } });
Customization
The look of the thrive button can be customized completely through CSS. If you have defined your default button style already that will be inherited (only background color will not).
Version History
1.0.0 : <2018.11.06>
- Initial stable release