Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcLinearProgressComponent

A linear progress indicator used to express unspecified wait time or display the length of a process.

Element

igc-linear-progress

Slot

  • The text area container.

Csspart

track - The igc-linear-progress track area.

Csspart

fill - The igc-linear-progress indicator area.

Csspart

striped - The igc-linear-progress striped indicator.

Csspart

label - The igc-linear-progress label.

Csspart

value - The igc-linear-progress label value.

Csspart

indeterminate - The igc-linear-progress indeterminate state.

Csspart

primary - The igc-linear-progress indicator primary state.

Csspart

danger - The igc-linear-progress indicator error state.

Csspart

warning - The igc-linear-progress indicator warning state.

Csspart

info - The igc-linear-progress indicator info state.

Csspart

success - The igc-linear-progress indicator success state.

Hierarchy

Hierarchy

  • IgcProgressBaseComponent
    • IgcLinearProgressComponent

Other

lifecycle

styles

Other

animationDuration

animationDuration: number = 500

Animation duration in milliseconds.

Attr

animation-duration

hideLabel

hideLabel: boolean = false

Shows/hides the label of the control.

Attr

hide-label

indeterminate

indeterminate: boolean = false

The indeterminate state of the control.

Attr

labelAlign

labelAlign:
    | "top"
    | "bottom"
    | "top-end"
    | "top-start"
    | "bottom-end"
    | "bottom-start" = 'top-start'

The position for the default label of the control.

Attr

label-align

labelFormat

labelFormat: string

Format string for the default label of the control. Placeholders: {0} - current value of the control. {1} - max value of the control.

Attr

label-format

max

max: number = 100

Maximum value of the control.

Attr

striped

striped: boolean = false

Sets the striped look of the control.

Attr

value

value: number = 0

The value of the control.

Attr

variant

variant:
    | "success"
    | "primary"
    | "info"
    | "warning"
    | "danger" = 'primary'

The variant of the control.

Attr

lifecycle

connectedCallback

  • connectedCallback(): Promise<void>

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
      super.connectedCallback();
      addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns Promise<void>

styles

Staticstyles

styles: CSSResult[] = ...

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse