https://github.com/effone/jquery.thrive

Yet another full-fledged jQuery progress indicator button plugin with bare minimum code.
https://github.com/effone/jquery.thrive

button jquery-plugin minimal progress-bar

Last synced: about 1 month ago
JSON representation

Yet another full-fledged jQuery progress indicator button plugin with bare minimum code.

• Host: GitHub
• URL: https://github.com/effone/jquery.thrive
• Owner: effone
• License: mit
• Created: 2018-11-06T04:24:06.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-08T05:56:15.000Z (about 6 years ago)
• Last Synced: 2024-09-14T14:38:22.008Z (2 months ago)
• Topics: button, jquery-plugin, minimal, progress-bar
• Language: CSS
• Size: 7.81 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

```

```

Include `jquery.thrive.min.js` from dist folder.

```

```

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` to `1` which will be converted to `%` value within the plugin. So, don't pass percent value directly. For example, a progress of `73%` reprecents the value to be `0.73`.

  

- It is _required_ to define your button for thrive in `...` tag. thrive doesn't work with `` 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` or `false` to show or hide a spinner inside the button indicating working on background. Default value is `true`.

  

  `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