Skip to content

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.

License

Notifications You must be signed in to change notification settings

agilie/GoButton

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

Check this project on Dribbble

Made by Agilie License

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

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

Preview

    <button>GO</button>
    <script type="text/javascript">
        $('button').gobutton({
            size: 150,
            loaderGap: '20',
            loaderWidth: '3',
            loaderColor: 'rgb(255,0,0)',
            infiniteSpin: true
         });
    </script>

Preview

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>

Preview

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

About

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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published