Loader

Loader exists in 3 sizes and are available as default or inverted depending on what surface it should be displayed on.

Code

import { Loader } from 'trinidad-ui';

const myLoader = new Loader('.js-loader');

// Size support for: 100, 200, 300
const size = 100;
myLoader.show(size, 'inverted');

// Show fullscreen loader
myLoader.show();

// Hides and removes the loader.
myLoader.hide();

Trinidad users

// Add dependency in your controller.

new svs.ui.Loader('.js-loader).show(200);

// Hides the loader and removes it
svs.ui.loader.hide();

Properties

Property	Default value	Available values	Description
delayedShow	true	true, false	Add a delay of 200ms before showing the loader to prevent flashing.

Methods

Method	Parameters		Description
show	size, theme		Sizes available is 100, 200 and 300. Themes available is inverted (and undefined for default).
hide			Hides and removes the loader.

Accessibility