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
Bd654a87439a6c2daa5fcd146f9b25ad7e1ab288 Rails Application Template for Creating Ruby-on-Rails Apps
Rails Application Template. A basic template for creating Ruby-on-Rails applications
B01cb6974b09d66e0ff310d657babb8bab99db6a jQuery GTM In-Viewport Manager Plugin
We’d like to share with you our new jQuery GTM In-Viewport Manager Plugin aimed to ease a way of working with Google Tag Manager (GTM). Add jQuery GTM In-Viewport Manager Plugin into your project to see for yourself how effective the interaction with GTM
B8ae08715ca65ef26850f8ed792ec77c5f6c4fa2 Timetracker Plugin. Keep Track of Time!
​The time counter can be a very helpful feature when creating websites as people often have to keep track of time and count it. That’s why we want to offer you our plugin named Timetracker that would be useful in many ways.