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();

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!

agilie/GoButton