Skip to Main Content

Breadcrumb

Unsupported

This plug-in is outdated and we are not planning to support it anymore

Please use our Progress Bar Pro plug-in

Examples

Default Shapes & Value

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...');

Custom Shape

You can even include your own custom SVG shape to show progress.

Animation

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.

Animation Queue

By enabling the "Queue Animations" feature in the "Options" attribute, the animations will be added to the effect queue, ie. the every animation will be finished completely, before the next one is fired.

In the example below click repeatedly on the buttons below to see the difference between the progress bars when this setting is disabled/enabled.

Color, size, messages

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.

Color Styles

With the "Style" attribute set to "Solid", you can simply set the color of the bar and the trail using the "Color" and "Trail Color" field.

By setting the "Style" to "Gradient", the progress bar will have a progressive transition between the colors set in the "Color" and "End Color" attributes.

Size and Messages

As per the examples below, the plug-in size can be set using the "height" attribute in the in the "JavaScript Initialization Code" setting. Additionally you can also set the "strokeWidth" and "trailWidth" to set the size of the "trail" and "bar" elements separately as to whether they match in size or one overlaps the other. 


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

The positioning of the current percentage marker and the message can be set with the respective "Show Percentage" and the "Show Message" attributes. You can control the message font-size by including either a CSS class or direct style on the plug-in in the "Custom Attribute" e.g. style="font-size:10px;"

Auto Refresh

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.

Click on the Start button, the plug-in will be refreshed in every 3 seconds until the progress is complete.

To dynamically update both the value and the message of the progress bar, use a colon separated value "70:Warming Up!"

Note: the "Add timer" option is only available if the item source is based on SQL or PL/SQL. If you reference any other page items in the item source code, please add them to the "Page Items to Submit" attribute.

You can also auto start the refreshing on page render by adding the following line the "Javascript Initialization Code" 


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

Listening to events

In this example we will show you how you can combine the progress bar with buttons and performing things like disabling/hiding buttons on start and enabling/showing on progress completion.

Process 1

Process 2