JSignage:ProgressBar

From SpinetiX Support Wiki

Jump to: navigation, search

Description

The progress bar widget shows a rectangle filling from left to right based on interactive progress indication.

The bar interior may be fill with a solid color, a smooth gradient from the fill color to the border color or a stripe pattern alternating between the two colors.

The progress bar is part of the interactive layer type and part of the interactivity framework.

progressBar parameters

All layers share a common set of attributes to define their screen layout and active time interval.

  • style
    One of 'manzana', 'square' or 'round'. Default: $.uiStyle.
  • color
    Color of the bar. Default: $.uiColor.

Specific functions

  • .setProgress( progress )
    Sets the percentage of progress and updates the bar.

See the list of functions to work with layers.

Examples

$(function(){
    var bar = $.progressBar( {
        style: 'square',
        left: '15%',
        top: '45%',
        width: '70%',
        height: '10%'
    }).addTo('svg');
    
    var progress = 0;
    function update() {
        progress += 1;
        bar.setProgress( progress+'%' );
    }
    $.setInterval( update, 50 );
});

This page was last modified on 25 March 2019, at 17:12.