Area Loader

Caution

This component is deprecated and will be removed at a later point.

<tpg-area-loader></tpg-area-loader>

The loader indicates loading of data in a panel, section or screen. The loader lays on top and fills the entire section and/or panel which contains content in loading state, thus hindering any user interaction on the unloaded content.

Component behavior

Displays a centered loading spinner and optionally an animated label underneath.

Examples

Default

Component

Code

  <div style="display:flex; flex-direction: column; height:300px">
      <tpg-area-loader></tpg-area-loader>
  </div>

No label

Component

Vanilla JS

  <div style="display:flex; flex-direction: column; height:300px">
      <tpg-area-loader hide-label></tpg-area-loader>
  </div>

React

function SomeComponent() {

return (
  <>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "300px",
      }}
    >
      <tpg-area-loader hideLabel={true}></tpg-area-loader>
    </div>
  </>
);
}

Custom label

Component

Vanilla JS

  <div style="display:flex; flex-direction: column; height:300px">
      <tpg-area-loader label="Im a custom label"></tpg-area-loader>
  </div>

React

function SomeComponent() {
return (
  <>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "300px",
      }}
    >
      <tpg-area-loader label="Im a custom label"></tpg-area-loader>
    </div>
  </>
);
}

Tables

Properties

Attribute	Property	Description	Type	Default Value
hide-label	hideLabel	Designates if the loading label should be present or not.	boolean	false
label	label	The label to be displayed when the loader is active, defaults to 'Loading'. Automatically adds three dots at the end of the label with blinking animation.	string	'Loading'

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
No slots found.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox