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

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

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 ([email protected])

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

License

The MIT License (MIT) Copyright © 2017 Agilie Team