Loading

Updated:

Provides simple animations used to indicate system activity (e.g., loading).

Properties

The q2-loading element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

counts

Numeric adjustments are available for specific type and shape combinations. These may impact the number of items, columns, and/or rows that display.

When shape="text", shape="detailed-item", or shape="label-value", the counts attribute determines the number of rows to display.

When shape="table", the counts attribute can be used in two ways:

  1. counts="CxR" = Provides a skeleton table of C columns and R rows. The default value is `"5x5"
  2. counts="N" - Provides a skeleton table of N columns and 5 rows.

When shape="form", the counts attribute can be used in two ways:

  1. counts="CxR" - Provides a skeleton form of Ccolumns andRrows of fields. The default value is"1x1"`.
  2. counts="N" - Provides a skeleton form of N fields stacked in single columns.
hideFromScreenReaders
hide-from-screen-readers

Hides the loading element from screen readers.

inline

Styles the component to have a height and width of 1em, making it easy to place alongside text.

label

The label that is associated with the component. This is not displayed visually but is presented by screen readers.

Localizable
modifiers

Visual adjustments available to specific type and shape combinations, written as a hyphen (-) separated string.

Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.

shape

The specific visual presentation of a loading element type.

// when type="spinner"
type ShapeValues = "half-circle";
// when type="skeleton"
type ShapeValues = "circle | "rectangle" | "text" | "table" | "field" | "form" | "detailed-item" | "label-value";
type

The type of loading element to display.

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-btn
    • q2-data-table
    • q2-file-picker

    Release Notes

    Initial Release

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    The following CSS variables are available to override the default theme styles of the q2-loadingcomponent.