Reference Source
import {Progress} from '@adobe/coral-spectrum'
public class | source

Progress

Expression Extends:

class Progress extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A Progress component to indicate progress of processes.

See:

Example:

Markup
<coral-progress></coral-progress>
JS constructor
new Coral.Progress();

Static Member Summary

Static Public Members
public static

Returns Progress label position options.

public static

Returns Progress sizes.

Member Summary

Public Members
public

Whether to hide the current value and show an animation.

public

Used to access to the Coral.Progress.Label element.

public

Label position.

public

Boolean attribute to toggle showing progress percent as the label content.

public

The vertical and text size of this progress bar.

public

The current progress in percent.

Static Public Members

public static labelPosition: ProgressLabelPositionEnum: * source

Returns Progress label position options.

public static size: ProgressSizeEnum: * source

Returns Progress sizes.

Public Members

public indeterminate: Boolean source

Whether to hide the current value and show an animation. Set to true for operations whose progress cannot be determined.

  • false by default.
  • reflected

public label: ProgressLabel source

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.

  • content-zone

public labelPosition: String source

Label position. See ProgressLabelPositionEnum.

  • ProgressLabelPositionEnum.LEFT by default.
  • reflected

public showPercent: Boolean source

Boolean attribute to toggle showing progress percent as the label content. Default is true.

  • false by default.

public size: String source

The vertical and text size of this progress bar. To adjust the width, simply set the CSS width property. See ProgressSizeEnum.

  • ProgressSizeEnum.MEDIUM by default.
  • reflected

public value: Number source

The current progress in percent.

  • 0 by default.
  • reflected

Emit:

coral-progress:change