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:

<link rel="stylesheet" href="dist/css/gobutton.css" />

<script src="jquery.min.css"></script>
<script src="dist/js/gobutton.js"></script>

How to use

<button class="foo"><img src="https://image.svg" style="height: 100%;"></button>
<button>Some Text</button>

<script>
    $('button').gobutton(options);
</script>

As a result:

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

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:

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.

Examples

Base usage

    <button>GO</button>
    <script type="text/javascript">
        $('button').gobutton();
    </script>

Custom size with infinite spin

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

Troubleshooting

Problems? Check the 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 (info@agilie.com)

Contributor

Agilie Team

Contact us

If you have any questions, suggestions or just need a help with web or mobile development, please email us at web@agilie.com. 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 (MIT) Copyright © 2017 Agilie Team