Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agilie/gobutton
This button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finish animation as well.
https://github.com/agilie/gobutton
animation button-widget html-css jquery-plugin loader rotation
Last synced: 7 days ago
JSON representation
This button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finish animation as well.
- Host: GitHub
- URL: https://github.com/agilie/gobutton
- Owner: agilie
- License: mit
- Created: 2017-05-23T14:19:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-05T16:41:13.000Z (almost 7 years ago)
- Last Synced: 2024-10-09T22:59:50.211Z (about 1 month ago)
- Topics: animation, button-widget, html-css, jquery-plugin, loader, rotation
- Language: JavaScript
- Homepage: https://agilie.com
- Size: 1.45 MB
- Stars: 51
- Watchers: 7
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Check this project on
Dribbble
# GoButton
This button is used for displaying an animation while a request is going. It could be run with infinite animation loop or with finit animation as well.
## Installation
##### Standalon:
```html
```
## How to use
```html
Some Text
$('button').gobutton(options);
```
##### As a result:
```html
```
### Configuration
Setting name
Description
Type
Default value
size
A button size (pixels)
string
"100"
color
A button color (please, use CSS supported formats - RGB, RGBA, HEX ect.).
string
"#25CED1"
loaderGap
A gap between loader and button's body (pixels).
string
"6"
loaderWidth
A loader element width (pixels).
string
"3"
loaderColor
A loader color (RGB, RGBA or HEX format).
string
"#25CED1"
infiniteSpin
Infinite animation flag.
boolean
false
animationSpeed
A time of the initial animation (seconds). The total animation time varies depending on the "infiniteSpin" flag. If the animation is finite then its time is equal to: animationSpeed + 0.5s.
int
2.5
classes
Classes which will be added to the wrapper element.
string
""
disable
This setting adds the "disabled" attribute to the button. (Similarly to the native way - elem.disabled = true)
boolean
false
Callbacks
onStart()
An event that triggers when the animation starts.
function
null
onStop()
An event that triggers after the download is completed.
function
null
onAnimationStart(event)
An event that triggers after the start of each animation (see the list of animations). Animation event as a parameter.
function
null
onAnimationStop(event)
An event that triggers after the end of each animation (see the list of animations). Animation event as a parameter.
function
null
##### Animations list
* *spin* - the main animation of the unwinding of the loader
* *infinitespin* - run after *spin*. Animation of infinite rotation, it works if the flag was set.
* *stopspin* - run after *spin*. Animation stops rotation, it works depending on the set flag of infinite animation.
* *stop* - the rotation stop animation is triggered by a second press of the button or stopping via the stop method.
##### Methods
Available via gobutton object:
```javascript
var gobutton = $('#gobutton').gobutton(options)[0].gobutton;
gobutton.start();
```
or
```javascript
var button = document.getElementById('gobutton');
$(button).gobutton(options);
button.gobutton.start();
```
Name
Description
start()
Start animation.
stop()
Stop animation.
infiniteStart(speed)
Run infinite roatation animation. A time of one spin in seconds as a parameter.
changeOption(nameOrOptions, valueOrNothing || {})
Change one of options. Option name and value, or options object as parameters.
## Examples
##### Base usage
```html
GO
$('button').gobutton();
```
##### Custom size with infinite spin
```html
GO
$('button').gobutton({
size: 150,
loaderGap: '20',
loaderWidth: '3',
loaderColor: 'rgb(255,0,0)',
infiniteSpin: true
});
```
To make the loader rotation smoother, it should be supplemented with a semitransparent background of the same color. But there are cases when it loses its nicety: too large button sizes (>100 pixels), a big gap between the button and the loader, low animation speed. Therefore, in these cases, you have to remove the background by writing the following style to the loader:
```html
.loader {
background-color: transparent!important;
}
```
## Troubleshooting
Problems? Check the [Issues](https://github.com/agilie/GoButton/issues) block
to find the solution or create an new issue that we will fix asap. Feel free to contribute.
## Author
This jQuery plugin is open-sourced by [Agilie Team](https://www.agilie.com?utm_source=github&utm_medium=referral&utm_campaign=Git_JS&utm_term=GoButton) ([[email protected]](mailto:[email protected]))
## Contributor
[Agilie Team](https://github.com/agilie)
## Contact us
If you have any questions, suggestions or just need a help with web or mobile development, please email us at . You can ask us anything from basic to complex questions.
We will continue publishing new open-source projects. Stay with us, more updates will follow!
## License
The [MIT](LICENSE.md) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com?utm_source=github&utm_medium=referral&utm_campaign=Git_JS&utm_term=GoButton)