Country
    Home   →   Blog   →   GOBUTTON Plugin. Diversify the Waiting Process

    GOBUTTON Plugin. Diversify the Waiting Process

    Usually, people don’t like to wait and do “nothing”. However, very often it’s inevitable. That's why one needs to make this time as pleasant or at least tolerable as possible. And this is especially true when developing applications, for it's very important that the user not leave the program until it has been completely downloaded.

    There're a lot of methods of achieving this result and we are happy to share our vision on this matter as well. We are excited to introduce you our new plugin named GOBUTTON.

    What is GOBUTTON?

    GOBUTTON plugin was developed to diversify and improve the waiting process for your users.

    The plugin is designed as a laconic button accommodating the download animation and can be easily integrated into your project. The user clicks the button that visualizes the expectation and makes it a lot less boring. Moreover, depending on the tasks one can run both finite and infinite animation version.

    button

    Also, we’ve made available the ability to configure the button during initialization and use. You can control such options as the color of the button and/or the loader (in the format of RGB, RGBA or HEX), button size (in pixels), the distance between the loader and the button (in pixels), the thickness of the line loader (in pixels), a type of the indicator (flag) of the infinite animation, etc.

    So you can easily set up GOBUTTON under your specific conditions anytime you want.

    When can you use GOBUTTON?

    • Loading screen. Use GOBUTTON plugin to create a simple and effective loading screen.
    • Games. In game applications, users often have to wait. Feel free to implement our button in your game app so it'll be used when loading the game or moving to a new level.
    • Any process of waiting while using the app. Our plugin will come in handy for every application where a user is forced to wait for anything: for example when making the purchase or selecting a product in the app online store.

    It seems simple, but it works. Try it yourself!

    Code example

    There is a very simple code for installing the GOBUTTON plugin:

    <link rel="stylesheet" type="text/css" href="gobutton.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="gobutton.js"></script>

    An example of using the GOBUTTON plugin:

    <button class=”foo”>
      <img src="https://image.svg" style="height: 100%;">
    </button>
    
    <button>Some Text</button>
    
    <script>
      $(function() {
        $('button').gobutton(options);
      });
    </script>

    The result of using the GOBUTTON plugin:

    <div class="circle wrap" style="width: 70px; height: 70px; padding: 4px;">
      <div class="loader" style="background-image: url(data:image/svg+xml;base64...); background-color: rgba(255, 255, 255, 0.2);"></div>
      <button class="main circle foo" style="width: 70px; height: 70px;">
        <img src="https://image.svg" style="height: 100%;">
      </button>
    </div>
    
    <div class="circle wrap" style="width: 70px; height: 70px; padding: 4px;">
      <div class="loader" style="background-image: url(data:image/svg+xml;base64...); background-color: rgba(255, 255, 255, 0.2);"></div>
      <button class="main circle" style="width: 70px; height: 70px;">Some Text</button>
    </div>

    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>
    
    <button>GO</button>
    
    <script type="text/javascript">
      $('button').gobutton({
        size: 150,
        loaderGap: '20',
        loaderWidth: '3',
        loaderColor: 'rgb(255,0,0)',
        animationSpeed: 10
      });
    </script>

    Also, you can visit this page for more details.

    Next Posts
    Rails Application Template for Creating...
    Rails Application Template. A basic template for creating...
    jQuery GTM In-Viewport Manager Plugin
    We’d like to share with you our new jQuery GTM...
    Timetracker Plugin. Keep Track of Time!
    ​The time counter can be a very helpful feature when...