Skip to Main Content



The FOS - Progress Bar item plug-in offers a visually impressive and flexible way to display progress within your APEX applications. You can customize the display type, colors, animations, messages, automated refreshing, and more....

The plug-in is built on top of the open source ProgressBar.js javascript library, which makes it possible to implement responsive and slick progress bars with animated SVG paths.


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 %

// Set the progress % and the message

Custom Shape

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


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.

    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"

    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


You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.