Global Loader

<tpg-global-loader></tpg-global-loader>

Global loaders, or skeleton loaders screen are an animated version of the user interface that mimics the page’s layout. They are to be used when the user is entering a blank new page but the back end hasn’t responded yet. The Global loading screen shows a default content in a shape similar to the actual content as it is loading and becoming available.

Component behavior

Inert. Purely a graphical element.

Examples

Singular loader

Component

Code

<tpg-global-loader></tpg-global-loader>

Using Rows and Columns

Use the rowsand columns prop to define the grid for your loader. It will automatically space the bars.

Component

Code

<tpg-global-loader rows="3" columns="2"></tpg-global-loader>

Custom spacing

It is possible to define the spacing however you want. Just load multiple global loaders and set your own flex style.

Component

Code

<div style="display:flex; flex-direction: column; gap: 1rem">
  <div style="display: flex; flex-direction: column; gap: 1rem">
    <div display: flex; gap: 1rem">
      <tpg-global-loader style="flex: 3"></tpg-global-loader>
      <tpg-global-loader style="flex: 1"></tpg-global-loader>
    </div>
    <div display: flex; gap: 1rem">
      <tpg-global-loader style="flex: 1"></tpg-global-loader>
      <tpg-global-loader style="flex: 1"></tpg-global-loader>
    </div>
    <div display: flex; gap: 1rem">
      <tpg-global-loader style="flex: 1"></tpg-global-loader>
      <tpg-global-loader style="flex: 3"></tpg-global-loader>
    </div>
  </div>
</div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
rows	rows	How many rows should be rendered	number	1
columns	columns	How many columns should be rendered	number	1

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