How to create a custom loading bar with your own Logo

To attract more clients, to look bigger, to be memorable,Narcissism, egotism, call it what you want. For small or big business owners to "brand" their businesses with a logo is very important as it represents their business. While using a web application, you will soon or later wait for an instruction to be completed and you'll see a progress bar (hopefully) to know how is the task going in the background, what could be better for your application, than using a custom progress bar with your own logo on it ? Maybe the money, however we are talking about a progress bar in your app, don't change the theme. This can be used either as a splash screen while your app loads or to show the progress of an asynchronous task in the UI.

In this article, you'll learn how to create your custom progress bar with your own logo, using LoadGo.

Requirements

To achieve our goal, we are going to use the LoadGo plugin. LoadGo is a Javascript plugin that allows you to create a progress bar by using your own images pretty easily using a couple of lines of code. This plugin is perfect to create a custom progress bar 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.
• LoadGo has been tested in IE 9, IE 10, IE Edge, Google Chrome and Mozilla Firefox.

To get started with LoadGo, download the .zip master here or clone the project from GitHub. LoadGo has 2 versions, the one uses jQuery and the other plain vanillaJS, independently of the version you want to use, add the script to your document using a script tag:

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

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

And then LoadGo will be loaded in your document. If you're using jQuery, you can use it with $("element").loadgo() or if you're using plain Javascript, then the LoadGo object will be available globally in the window.

LoadGo is under the MIT License. Feel free to download, modify and adapt it to your own purposes. If you find any bug, send a pull request or write an issue in the official Github repository.

Basic usage

As previously, mentioned 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 or something else.
• Current page is loading.

The possibilities are endless, now you only need to learn the basics of this plugin. The first you need to know, is that we need an existent DOM element, this DOM element needs to be a <img> node. Besides, this img element needs to load your own logo, however this logo doesn't need any modification, the logo can be the original logo of your organization, LoadGo will add a transparent overlay that will add the loading effect. 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:

<div>
    <img id="logo-loader" src="my-logo-file.png" alt="Loading my friend ..." />
</div>

Our element, in this case has the logo-loader id. Now to initialize with Javascript, execute the $("element").loadgo method if you're using jQuery or Loadgo.init with plain javascript.

// If you're using jQuery
$('#logo-loader').loadgo();

// If you're using plain JS
var imgLogoElement = document.getElementById("logo-loader");
Loadgo.init(imgLogoElement);

That should create the transparent overlay that will clarify your logo, however it won't show a progress alone ! Therefore we need to change the progress of the bar using either Loadgo.setprogress using vanillaJS or $(element).loadgo('setprogress', value). As how to change the value of the progress bar is up to you, we show an example using setInterval and changing the value of the progress bar using Javascript.

For this you have 2 options:

Use the built-in loop method

To test if you've implemented everything right, you can execute the loop method to create an indefinite loop that will animate the progress bar:

// jQuery
$('#logo-loader').loadgo('loop', 10);

// Javascript
Loadgo.loop(document.getElementById('logo-loader'), 10);

and stop it using:

// jQuery
$('#logo-loader').loadgo('stop');

// Javascript
Loadgo.stop(document.getElementById('logo-loader'));

That should produce the following result:

Complicate yourself with JS

You can implement your own progress change using the setInterval method:

var progress = 0;

// Every half second add 10 to the progress of the bar
var myInterval = setInterval(function(){ 
    // Stop progress
    if(progress == 100){
        return stopInterval();
    }
    // Update progress
    progress += 10;

    // Change progress of the bar with JAVASCRIPT
    Loadgo.setprogress(document.getElementById("logo-loader"), progress);
}, 500);

function stopInterval(){
    clearInterval(myInterval);
    console.log("The progress bar has a value of 100 %");
}

And with jQuery:

var progress = 0;

// Every half second add 10 to the progress of the bar
var myInterval = setInterval(function(){ 
    // Stop progress
    if(progress == 100){
        return stopInterval();
    }
    // Update progress
    progress += 10;

    // Change progress of the bar with JQUERY
    $('#logo-loader').loadgo('setprogress',progress);
}, 500);

function stopInterval(){
    clearInterval(myInterval);
    console.log("The progress bar has a value of 100 %");
}

And that's it, the most basic implementation of LoadGo with your own logo. The following example illustrates how does Loadgo works with the Our Code World logo:

The code used, for the previous example is:

<div>
    <img id="logo-loader" src="http://ourcodeworld.com/resources/img/ocw-logo-main.png" />
</div>

<!-- Load Loadgo -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.1/loadgo-nojquery.min.js"></script>
<script>
    var image = document.getElementById("logo-loader");
    
    // When the image loads, create the progress
    image.onload = function(){
        // Init the loader
        Loadgo.init(image);
        // Load effect
        triggerLoadEffect();
    };

    function triggerLoadEffect(){
        var progress = 0;

        // Every half second add 10 to the progress of the bar
        var myInterval = setInterval(function(){ 
            // Stop progress
            if(progress == 100){
                return stopInterval();
            }
            // Update progress
            progress += 10;

            // Change progress of the bar
            Loadgo.setprogress(image, progress);
        }, 500);

        function stopInterval(){
            clearInterval(myInterval);
            console.log("The progress bar has a value of 100 %");
        }
    }
</script>

Besides of the setprogress method, loop and stop, LoadGo offers other 2 methods.

Methods and options

You can set some options at the initialization of the plugin:

// Custom options with jQuery
$('#my-image').loadgo({
  filter:    'blur',
  direction:    'bt',
  opacity:  1,
  image:    'custom-overlay.png',
  bgcolor:    '#01AEF0'
});

// Custom options with Javascript
var element = document.getElementById("my-image");
Loadgo.init(element, {
  filter:    'blur',
  direction:    'bt',
  opacity:  1,
  image:    'custom-overlay.png',
  bgcolor:    '#01AEF0'
});

The supportes options of the API are:

• 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 (NOTE: 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'.

The LoadGo API provides in total 5 methods:

Set progress

The set progress method expects a number to set the progress of the 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

This method sets the 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

This method returns the current progress. This number will be between 0 and 100 (percentage).

// jQuery
$('#logo').loadgo('getprogress');

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

Loop

The sets overlay method creates an indefinitely loop. 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. You can stop it using the stop method.

// jQuery
$('#logo').loadgo('loop', 10);

// Javascript
Loadgo.loop(document.getElementById('logo'), 10);

Stop

The stop method stops the loop and shows the full image.

// jQuery
$('#logo').loadgo('stop');

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

For more examples and possibilities with this library, visit the examples area in the official website here. Happy coding !