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.
Check this project on Dribbble
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.
<link rel="stylesheet" href="dist/css/gobutton.css" />
<script src="jquery.min.css"></script>
<script src="dist/js/gobutton.js"></script>
<button class="foo"><img src="https://image.svg" style="height: 100%;"></button>
<button>Some Text</button>
<script>
$('button').gobutton(options);
</script>
<div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
<div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
<button class="foo main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
<img src="https://image.svg" style="height: 100%;">
</button>
</div>
<div class="circle gobutton" style="width: 100px; height: 100px; padding: 6px;">
<div class="loader" style="background-image: url('data:image/svg+xml;base64...'); background-color: rgba(37, 206, 209, 0.2);"></div>
<button class="main circle" style="width: 100px; height: 100px; background-color: rgb(37, 206, 209);">
Some Text
</button>
</div>
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 |
Available via gobutton object:
var gobutton = $('#gobutton').gobutton(options)[0].gobutton;
gobutton.start();
or
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. |
<button>GO</button>
<script type="text/javascript">
$('button').gobutton();
</script>
<button>GO</button>
<script type="text/javascript">
$('button').gobutton({
size: 150,
loaderGap: '20',
loaderWidth: '3',
loaderColor: 'rgb(255,0,0)',
infiniteSpin: true
});
</script>
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:
<style>
.loader {
background-color: transparent!important;
}
</style>
Problems? Check the Issues block to find the solution or create an new issue that we will fix asap. Feel free to contribute.
This jQuery plugin is open-sourced by Agilie Team ([email protected])
If you have any questions, suggestions or just need a help with web or mobile development, please email us at [email protected]. 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!
The MIT License (MIT) Copyright © 2017 Agilie Team