Use the Progress component to indicate progress of processes.

Coral.Progress API

Constructor

JavaScript:

new Coral.Progress() or document.createElement('coral-progress')

HTML Tag:

<coral-progress>

Extends

Sub-components

Static Properties

Coral.Progress.labelPosition {String}

Enumeration representing progress bar label positions.

Properties:

Name Type Value Description
LEFT String left Show the label to the left of the bar.
RIGHT String right Show the label to the right of the bar.
BOTTOM String bottom Show the label below the bar.

Coral.Progress.size {String}

Enumeration representing progress bar sizes.

Properties:

Name Type Value Description
SMALL String S A small progress bar.
MEDIUM String M A medium progress bar.
LARGE String L A large progress bar.

Instance Properties

instance.indeterminate {Boolean}

Reflected
Whether to hide the current value and show an animation. Set to true for operations whose progress cannot be determined.
Default Value:
  • false
HTML Attribute:
  • indeterminate

instance.label {HTMLElement}

Used to access to the Coral.Progress.Label element. Keep in mind that the width of a custom label is limited for Coral.Progress.labelPosition.LEFT and Coral.Progress.labelPosition.RIGHT.

instance.labelPosition {Coral.Progress.labelPosition}

Label position.
Default Value:
  • Coral.Progress.labelPosition.RIGHT
HTML Attribute:
  • labelposition

instance.showPercent {Boolean}

Boolean attribute to toggle showing progress percent as the label content. Default is true.
Default Value:
  • false
HTML Attribute:
  • showpercent

instance.size {Coral.Progress.size}

The vertical and text size of this progress bar. To adjust the width, simply set the CSS width property.
Default Value:
  • Coral.Progress.size.MEDIUM
HTML Attribute:
  • size

instance.value {Number}

Reflected
The current progress in percent.
Default Value:
  • 0
HTML Attribute:
  • value

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
The event name to stop listening for.
selector String Yes
The selector that was used for event delegation.
func function No
The function that was passed to on().
useCapture Boolean Yes
Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to listen for.
selector String Yes
The selector to use for event delegation.
func function No
The function that will be called when the event is triggered.
useCapture Boolean Yes
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:hide

Triggerred after the component is hidden with Coral.Component#hide.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-progress:change

Triggered when the progress value is changed.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.value Object The current progress value in percent.
event.detail.oldValue Object The previous progress value in percent.