The plug-in comes with three built-in shapes: "Line", "Circle", "Semi-Circle". When setting the page item value, you can set both the percentage and (optionally) the text using a colon separated value e.g. {Percentage}:{Text}

Using Javascript you can set the value dynamically using the apex.item API e.g.

// Set the progress %
apex.item('P1_ITEM_NAME').setValue(75);

// Set the progress % and the message
apex.item('P1_ITEM_NAME').setValue('75:Loading...');

Use the "Animation" attribute to set the animation of the progress bar. The "Duration" attribute defines the length of time that the animation takes to complete (in milliseconds).

In the example below, change the progress bar values by clicking on the buttons and see how the different animations behave.

Please Note: due to the limitation on the number of plug-in attributes(15), some of the options must be set through the "JavaScript Initialization Code" attribute.

function(config){
    config.height = '90px';
    config.strokeWidth = 7;
    config.trailWidth = 15;
    return config;
}

Check the "Add Timer" box in the "Options" attribute to automatically refresh the progress bar value based on a specified interval (in milliseconds). The timer will be removed once the progress value reaches 100 or you can set a fixed/maximum number of repetitions in case the progress value does not reach 100.

function(config){
    config.autoStartInterval = true;
    return config;
}