Element: <oj-progress-bar>

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Since:
  • 9.0.0
Module:
  • ojprogress-bar

Note: This component is in maintenance mode. Suggested alternative: <oj-c-progress-bar>. For help updating an existing application, see the migration section.

Note: This component is not supported in the following themes: Alta

QuickNav

Attributes

Methods

Other Topics


JET Progress Bar

The JET Progress Bar element allows a user to display progress of an operation in a rectangular horizontal meter. If a developer does not wish to display the exact value, a value of '-1' can be passed in to display an indeterminate value. 
<oj-progress-bar value='{{progressValue}}'></oj-progress-bar>

Accessibility

If this element is being used to describe the loading process of a particular region of a page, then the aria-describedby attribute of the region must point to the id of the oj-progress-bar and aria-busy = "true" must be added to the region until the loading is complete.

Migration

Read about current Core Pack limitations to decide when to migrate.
Please make note of the following:

  • Deprecated APIs are not available in Core Pack, and are not documented in this migration section.
  • Before trying to migrate to Core Pack run the JET audits and fix any issues before proceeding.
  • The refresh() method is no longer supported in Core Pack. See the Core Pack Migration Guide for more information.

To migrate from oj-progress-bar to oj-c-progress-bar, you need to revise the import statement and references to oj-progress-bar in your app. Please note the changes between the two components below.
oj-progress-bar-embedded class

To render a progress bar that is attached to a container, set the edge attribute to 'top' instead of using the 'oj-progress-bar-embedded' class.


Usage

Signature:

interface ProgressBarElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { ProgressBarElement } from "ojs/ojprogress-bar";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojprogress-bar";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Styling Classes

.oj-progress-bar-embedded
Optional class that can be set on a oj-progress bar element to style an embedded progress bar within a web application or dialog.
Example
<div class='oj-web-applayout-page'>
  <header class='oj-web-applayout-header'>
  </header>
  <oj-progress-bar class='oj-progress-bar-embedded' value='{{loadingValue}}'>
  </oj-progress-bar>
</div>

CSS Variables

See JET CSS Variables for additional details.
Name Type Description
--oj-progress-bar-height <length> Progress bar height
--oj-progress-bar-border-radius <length> | <percentage> Progress bar border radius
--oj-progress-bar-track-bg-color <color> Progress bar track background color
--oj-progress-bar-value-bg-color <color> Progress bar value background color

Attributes

max :number

The maximum allowed value. The element's max attribute is used if it is provided, otherwise the default value of 100 is used.
Default Value:
  • 100
Names
Item Name
Property max
Property change event maxChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-changed

value :number

The value of the Progress Bar. The element's value attribute is used if it is provided, otherwise the default value of 0 is used. For indeterminate Progress, set value to -1. Any other negative value will default to 0.
Default Value:
  • 0
Names
Item Name
Property value
Property change event valueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-changed

Methods

getProperty(property) : {any}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void