Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Progress Bar (gallery-progress-bar) on cdn

Last Updated: 10/16/12

+ 0 -

Anthony Pipkin

YUI Developer

See 28 more by this user.

Created: 08/18/10
Last CDN Push: 02/9/11
Build Tag: gallery-2011.02.09-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.7.3
Free for use.

 

 Moving to 'gallery-xarno-progress-bar' and Y.Xarno.ProgressBar

A progress bar with fully customizable label and template. Custom skinning will be required for visual slider feedback. Moves the background of the slider class to simulate a progress bar. Also updates a label template if one is provided.

Configuration

animation - Animation configuration to be used when updating the progress bar. Width is added automatically and will override any to.width configuration supplied.
labelTemplate - Template used to display the progress
label - Associated array used to update the label template with a status at a specific percentage. Default is {0: 'Loading', 100:'Complete'}
layout - Template used to append to the content box as the animated progress slider
precision - Number of decimals to show with percentage calculations
progress - Percentage of completion.

Tags:
apipkin

In this example we create a new progress bar with a custom layout and set the render to true to auto render the widget.

Then we add a custom label at position 50, this will update the label once the progress has reached at least 50, without overriding the default labels ( {0: 'Loading', 100: 'Complete'} ).

Next we create a function that will incrementally update the progress bar to simulate something happening. Normally, you would do this based on actual data feedback not a timer.

Code Sample

<script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.02.09-21-32'
}).use('gallery-progress-bar', function(Y) {
 
    Y.on('domready',function(){
        var pb1 = new Y.ProgressBar({
              render: true, 
              layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'
        });
        pb1.setLabelAt(50, 'Initializing');
 
        (function upIt() {
            var p = pb1.get('progress');
            if(p <= 100) {
                Y.later(1000, this, function(e){
                    pb1.increment(8.4);
                    upIt();
                });
            }
        })();
 
    });
 
});

Forum Posts

Subject	Author	Date
feedback + feature request.	Andrew Wooldridge	12/9/10
Adding a 100% animation on:end hook	Jacob Fogg	05/11/11
Re: Adding a 100% animation on:end hook	Anthony Pipkin	05/11/11
Standardizing apipkin Modules	Anthony Pipkin	10/16/12
example page doesn't show example	Marc	11/17/12
gallery-xarno-progress-bar	F21	03/24/13