Loading states and indicators

Loading states are used before page content is ready.

Ghost card

Ghost cards are used while page content is loading to indicate to the user that content is on the way.

$tg-ghost-colour

Use the ghost colour on loading elements to show where different content will be.

$tg-ghost-opacity

Ghost opacity can also be used on loading elements to show where different content will be - this is not normally used in conjunction with ghost colour.

Loading spinner

This directive is deprecated.
We recommend using loading on tgButton2 instead for improved performance.

import { TgLoadingDirective } from '@trademe/tangram';

[tgLoading] is a directive which must be imported and can be applied to an element.

It displays a spinner to indicate something is loading by binding an Observable or Promise to [tgLoading]. The spinner will display until the Promise is resolved, or results return from the Observable.

The loading spinner should only ever be used after an action. For example, ‘Loading’ is used on buttons that trigger an action on the same page, e.g. “Load more results”.

Loading states and indicators

Ghost card

Example

Example

Loading spinner