Progress

The progress service will help to show/hide/update the progress bar over the page or in the specified element.

Demo #

Click the buttons to see how the progress service work.

// HTML
<div data-kube="mymodule">
    <button data-type="show">Show</button>
    <button data-type="hide">Hide</button>
    <button data-type="update">Update</button>
</div>

// JS
(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        // events
        onclick: function(e, element, type)
        {
            e.preventDefault();
            if (type === 'show')
            {
                this.progress.show();
            }
            else if (type === 'hide')
            {
                this.progress.hide();
            }
            else if (type === 'update')
            {
                this.progress.update({ value: 50 });
            }
        }
    });
})(Kube);

Settings #

target

Type: Boolean String

Default: false

By default, the progress bar will show at the top of the page. This setting allow to show progress in the specified element on the page.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        showProgress: function()
        {
            this.progress.show({ target: '#mybox' });
        }
    });
})(Kube);

value

Type: Number

Default: 100

This option set the value of progress bar.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        updateProgress: function()
        {
            this.progress.update({ value: 50 });
            this.progress.update({ target: '#mybox', value: 50 });
        }
    });
})(Kube);

Methods #

show

Arguments
params Object settings of the progress

Show the progress bar.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        showProgress: function()
        {
            // show at the top of the page
            this.progress.show();

            // show in the target element
            this.progress.show({ target: '#mybox' });
        }
    });
})(Kube);

hide

Arguments
params Object settings of the progress

Hide the progress bar.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        hideProgress: function()
        {
            this.progress.hide();

            // or hide if progress is in the target element
            this.progress.hide({ target: '#mybox' });
        }
    });
})(Kube);

update

Arguments
params Object settings of the progress

Update the progress bar.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.progress = app.progress;
        },
        updateProgress: function()
        {
            this.progress.update({ value: 30 });

            // or update if progress is in the target element
            this.progress.update({ target: '#mybox', value: 30 });
        }
    });
})(Kube);