What is LoadGo?

LoadGo is a Javascript plugin that allows you to create a progress bar by using your own images.

- Perfect for logo image animation when user is waiting for something to be loaded (a website, retrieving information, updating status, etc.)

- It creates an overlay above your desire DOM element and simulates a loading process using width calculations.

- Tested in IE 9, IE 10, IE Edge, Google Chrome and Mozilla Firefox.

0 %
Try LoadGo by pressing Start button.
Announcement You can now use LoadGo without jQuery (yay!). Every example is coded with and without jQuery.

LoadGo for Wordpress is alive!

As many of you requested, you can now use LoadGo in your Wordpress with LoadGo for WP. Just install it, upload your own logo and see how it will be updated when your page is loading. Very cool.

You can download it from LoadGo for WP official Wordpress site.


 How to use LoadGo

If you are using jQuery, remember that you have to include it BEFORE using this plugin. I tested it with jQuery v1.11.2, and it works well.

If you are not using jQuery, just include LoadGo script and start using it. Easy as hell.

 Production environment (CDN)

(17-Oct-2015) LoadGo is now hosted on cdnjs, so you can link it directly. Thanks so much to cdnjs team for their quickly response! (issue#5927)

<!-- If you use jQuery-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo.min.js"></script>

<!-- If you don't use jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo-nojquery.min.js"></script>
 What are the advantages and disadvantages of using a content delivery network (CDN)?

 Development environment

1. Download LoadGo from this link or clone it from GitHub.

2. Uncompress it (if zipped) and copy LoadGo folder into your JS scripts.

3. Insert the following code in your webpage:

<!-- If you use jQuery -->
<script type="text/javascript" src="loadgo/loadgo.js"></script>

<!-- If you don't use jQuery -->
<script type="text/javascript" src="loadgo/loadgo-nojquery.js"></script>

You can also use the minified version:

<!-- If you use jQuery -->
<script type="text/javascript" src="loadgo/loadgo.min.js"></script>

<!-- If you don't use jQuery -->
<script type="text/javascript" src="loadgo/loadgo-nojquery.min.js"></script>

Important LoadGo needs images fully loaded in order to read its dimensions correctly. If you are not sure when this is going to happen, you can use this piece of code with each image:

//jQuery
$("#my-image").load(function() {
  $('#my-image').loadgo();
}).each(function() {
  if(this.complete) $(this).load();
});
// Javascript
var image = document.getElementById("my-image");
image.onload = function () {
  Loadgo.init(this);
};

 Example #1: default

Image logo with default properties.

jQuery

$('#disney').loadgo();

Javascript

Loadgo.init(document.getElementById("disney"));
0 %

 Example #2: opacity, no transition animation and background color

Image logo with opacity set to 0.2, without width transition when changing progress and background set to #01AEF0

jQuery

$('#superman').loadgo({
  'opacity':    0.2,
  'animated':   false,
  'bgcolor':    '#01AEF0'
});

Javascript

Loadgo.init(document.getElementById("superman"), {
  'opacity':    0.2,
  'animated':   false,
  'bgcolor':    '#01AEF0'
});
0 %

 Example #3: image overlay

Image logo is the original (in this case, Batman's logo with yellow background) and overlay image is the one with some filter, or other effect pretty similar to the original image logo (in this case, Batman's logo with white background).

jQuery

$('#batman').loadgo({
  'opacity':  1,
  'image':    'batman-overlay.png'
});

Javascript

Loadgo.init(document.getElementById("batman"), {
  'opacity':  1,
  'image':    'batman-overlay.png'
});
0 %

 Example #4: playing with directions

Loading animation can be set from: left to right (lt), right to left (rl), bottom to top (bt) or top to bottom (tb);

// Left to Right - jQuery
$('#jurassiclr').loadgo({
  'direction':    'lr'
});

// Left to Right - Javascript
var jlr = document.getElementById("jurassiclr");
Loadgo.init(jlr, {
  'direction':    'lr'
});
0 %
// Right to Left - jQuery
$('#jurassicrl').loadgo({
  'direction':    'rl'
});

// Right to Left - Javascript
var jrl = document.getElementById("jurassicrl");
Loadgo.init(jrl, {
  'direction':    'rl'
});
0 %
// Bottom to Top - jQuery
$('#jurassicbt').loadgo({
  'direction':    'bt'
});

// Bottom to Top - Javascript
var jbt = document.getElementById("jurassicbt");
Loadgo.init(jbt, {
  'direction':    'bt'
});
0 %
// Top to Bottom - jQuery
$('#jurassictb').loadgo({
  'direction':    'tb'
});

// Top to Bottom - Javascript
var jtb = document.getElementById("jurassictb");
Loadgo.init(jtb, {
  'direction':    'tb'
});
0 %

 Example #5: filters

CSS3 image filters applied for progress instead of an overlay.

// Sepia - jQuery
$('#spidermanSepia').loadgo({
  'filter':    'sepia'
});

// Sepia - Javascript
var ssepia = document.getElementById("spidermanSepia");
Loadgo.init(ssepia, {
  'filter':    'sepia'
});
0 %
// Blur - jQuery
$('#spidermanBlur').loadgo({
  'filter':    'blur'
});

// Blur - Javascript
var sblur = document.getElementById("spidermanBlur");
Loadgo.init(sblur, {
  'filter':    'blur'
});
0 %
// Invert - jQuery
$('#spidermanInvert').loadgo({
  'filter':    'invert'
});

// Invert - Javascript
var sinvert = document.getElementById("spidermanInvert");
Loadgo.init(sinvert, {
  'filter':    'invert'
});
0 %
// Hue Rotate - jQuery
$('#spidermanHue').loadgo({
  'filter':    'hue-rotate'
});

// Hue Rotate - Javascript
var shue = document.getElementById("spidermanHue");
Loadgo.init(shue, {
  'filter':    'hue-rotate'
});
0 %
// Opacity - jQuery
$('#spidermanOpacity').loadgo({
  'filter':    'opacity'
});

// Opacity - Javascript
var sopacity = document.getElementById("spidermanOpacity");
Loadgo.init(sopacity, {
  'filter':    'opacity'
});
0 %
// Grayscale - jQuery
$('#spidermanGrayscale').loadgo({
  'filter':    'grayscale'
});

// Grayscale - Javascript
var sgray = document.getElementById("spidermanGrayscale");
Loadgo.init(sgray, {
  'filter':    'grayscale'
});
0 %

 Documentation

 Introduction

LoadGo is a plugin which provides you a better way to keep your users update about loading process that take some time to be completed. For example:

  • Users upload a file to your server.
  • System is converting a file to PDF.
  • Current page is loading.
  • Etc.

Important This plugin won't control asynchronous behaviour for your loading process, so you have to do that by yourself in your app.

In order to do this, LoadGo creates an overlay on top of your image, and playing with its width simulates a loading behaviour. This overlay is set by using position: absolute CSS property, so your DOM element needs to be inside a DIV element or things won't look good.

This piece of code is a minimum example:

<div>
  <img id="logo" src="logo.png" alt="Logo" />
</div>
// jQuery
$('#logo').loadgo();

// Javascript
Loadgo.init(document.getElementById('logo'));

 Initialization

LoadGo needs to be initialized in a DOM element before use.

jQuery

$('#logo').loadgo();

Javascript

Loadgo.init(document.getElementById('logo'));

Now, you are capable of set progress and simulate any kind of progression. LoadGo have three methods and a couple of options which will help you.

LoadGo also applies an empty CSS class to overlay called loadgo-overlay in case that you want to implement your own resize function or some other advanced features.

 Options

  • bgcolor: background overlay color in hexadecimal or RGB. Default is #FFFFFF.
  • opacity: overlay transparency. Default is 0.5
  • animated: true if setprogress CSS width transitions are enable, false otherwise. Default is true (remember that Internet Explorer does not support CSS transitions).
  • image: image url to bet use if want a background image instead of a simple color. This option disables bgcolor option.
  • class: CSS class which will be applied to overlay. By using this option you should assure that all looks good because some CSS options for class could invalidate other LoadGo plugin CSS options. Default is none.
  • resize: resize function. LoadGo provides a function which automatically resizes LoadGo overlay by default, but you can use your own.
  • direction: animation direction. Possible values: lr (left to right), rl (right to left), bt (bottom to top), tb (top to bottom). Default is lr.
  • filter: CSS image filter according to CSS filter property. Possible values: blur, grayscale, sepia, hue-rotate, invert, opacity.

 Methods

  • Set Progress: set progress number to loading overlay. This number must be between 0 and 100 (percentage).

// jQuery
$('#logo').loadgo('setprogress', 50);
// Javascript
Loadgo.setprogress(document.getElementById('logo'), 50);

  • Reset progress: set progress to zero automatically. This is really useful when you are using the same element for multiple loads, and you need to reset all before starting a new one.

// jQuery
$('#logo').loadgo('resetprogress');
// Javascript
Loadgo.resetprogress(document.getElementById('logo'));

  • Get progress: return current progress. This number will be between 0 and 100 (percentage).

// jQuery
$('#logo').loadgo('getprogress');
// Javascript
Loadgo.getprogress(document.getElementById('logo'));

  • Loop: sets overlay to loop indefinitely until stopped. This is useful for situations where you have no way of measuring the progress. This method accepts a duration (ms) parameter to customize animation speed.

// jQuery
$('#logo').loadgo('loop', 10);
// Javascript
Loadgo.loop(document.getElementById('logo'), 10);

  • Stop: stops the loop and shows the full image. Since loops are indefinite we need to use this method to manually stop it.

// jQuery
$('#logo').loadgo('stop');
// Javascript
Loadgo.stop(document.getElementById('logo'));

 Real example

In your webpage, you are using a jQuery plugin like Uploadify to give your users a way to upload files to you page (for example: update his/her web avatar). Most of these plugins provide events like onUploadStart, onUploadProgress or onUploadComplete. These events have variables which give you a lot of information about your current load progress (file size, current uploaded bytes, etc).

You can use this information with LoadGo to update logo overlay like this:

// Set LoadGo on your Logo
$('#logo').loadgo();

// Set Uploadify on your upload input
$('#uploadinput').uploadify({
  // init options...
  onUploadStart: function (event) {
    // Upload is going to start, so we need to reset loadgo
    $('#logo').loadgo('resetprogress');
  },
  onUploadProgress: function (event) {
    // We receive some bytes on our upload and updates loadgo progress,
    // but first, we should calculate total uploaded percentage
    var p = event.bytesLoaded / event.bytesTotal;
    $('#logo').loadgo('setprogress', p);
  },
  onUploadComplete: function (event) {
    // Upload complete
  }
});

 Current LoadGo examples

To create LoadGo minimum examples, some intervals were set to recreate this effect. Following code is used by CocaCola example at the beginning of this page:

$(document).ready(function () {
  $('#cocacola').loadgo();
});

// We create an interval which will be removed when progress completes
var cocacolaInterval;
function mainDemo () {
  var p = 0;
  $('#cocacola').loadgo('resetprogress');   // reset progress to start again
  cocacolaInterval = window.setInterval(function (){
    if ($('#cocacola').loadgo('getprogress') == 100) {
      // When progress completes, we have to clear the interval
      window.clearInterval(cocacolaInterval);
    }
    else {
      var prog = p*10;
      $('#cocacola').loadgo('setprogress', prog);
      p++;
    }
  }, 150);
};

mainDemo function is actually bind to 'Start' button, so when you click on it this function will be executed.


 Download

You can obtain LoadGo using following methods:

- Direct download: ZIP

- Github repository: link

LoadGo is under MIT License. Feel free to download, modify and adapt it to your own purposes.



LoadGo

Created by Fran Verona -

Back to top