Spinline jQuery plugin
Use Youtube-style ajax loading spinner.
It looks as a line that automatically increases but never reaches the end.
So you can start it on ajax request and finish when request finished.
The main difference from already existing this type of plugins is that it can be positioned not only on the top of the block or page but also at the bottom.
It doesn't cover any of your elements. Very easy to use and looks cool.
Installation
NPM
npm install spinline
Bower
bower install spinline
Manually
Just download the package and attach spinline.jquery.js script to your page.
Usage
Siple usage examples:
; ; ;
Actions
start
- Attach spinner to the element and start movementfinish
- Increase spinner till the end and removepause
- Stop the movement of the spinner but still display itproceed
- Continue paused spinnerremove
- Remove spinnerset
- Manually set the width of spinner. Requires the second parameter as a percentage from entire block.get
- Get current spinner data and current width. Always returns array of objects.
Parameters
// Thickness of spinner height: '2px' // Color of spinner color: '#ff0000' // The width that will be set on start initialWidth: '5%' // How often to move the spinner frequency: 500 // Step in percent to increase spinner on every move step: 3 // Where to attach spinner position: 'bottom' // z-index attribute of spinner zIndex: 1
Events
spinline:started
- Triggered when spinner initially started
spinline:paused
- Triggered when spinner paused
spinline:proceed
- Triggered when spinner received command to continue movement
spinline:proceeded
- Triggered if spinner continued movement
spinline:finished
- Triggered when spinner finished
spinline:removed
- Triggered when spinner removed
Contributions
Contributions are highly appreciated.
Send your pull requests to master
branch.
License
The MIT License (MIT). Please see License File for more information.