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.


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.

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>Some Text</button>

  $(function() {

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%;">

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

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:

  .loader {
    background-color: transparent!important;


<script type="text/javascript">
    size: 150,
    loaderGap: '20',
    loaderWidth: '3',
    loaderColor: 'rgb(255,0,0)',
    animationSpeed: 10

Also, you can visit this page for more details.

comments powered by Disqus
Cf68cdaaf75f9cd1417267c6b1cafb3813c488a1 Virtual Reality Applications
Augmented reality apps are widely used – from geolocalization to using it in gaming industry. Augmented reality app is a new way to access data determined by environment conditions.
754d17aa02f8c56a0e0b671d45bf2455f6177062 Agile Methodology (Scrum)
Scrum is the very popular agile methodology for managing product development and project delivery. Scrum is the framework that could be applied for the development of product use cases, different projects or entire products.
1a1b621bfd24aba09a56bb25cf18719ad46ef190 News App Development
Smartphones are regularly used everywhere & anytime: in cars, on the way to the office, during the rest on holidays or weekends. That’s very convenient way for users to access important or just fun information with the help of news mobile app.
D63ac21dfd17c4acc93d52d9bdc72fea10e84edd Geolocation Services in Mobile Tracking Software
Geolocation services are used by many mobile apps, websites, mobile operators etc.