6.0.1 • Published 4 months ago

@financial-times/o-loading

Licence

MIT

Version

6.0.1

Deps

Size

20 kB

Vulns

Weekly

2.8K

Summary Dependency Versions

o-loading

This is an Origami component that provides a visual loading indicator.

Usage
Markup
Sass
Migration guide
Contact
Licence

Usage

Check out how to include Origami components in your project to get started with o-loading.

Markup

In order to display a loading indicator in your product, you will need to supply the theme and the size modifiers in your markup, e.g.:

<div class="o-loading o-loading--light o-loading--small"></div>

Sass

In order to output all of the variations in theme and size of o-loading, you'll need to include the following:

@import '@financial-times/o-loading/main';

@include oLoading();

You can also be more selective about which themes or sizes of the loading indicator you wish to output, by using a map. The $opts map accepts two lists:

'themes':

light
dark

And 'sizes':

mini
small
medium
large

@import '@financial-times/o-loading/main';

@include oLoading(
	$opts: (
		'themes': (
			'light',
		),
		'sizes': (
			'medium',
			'large',
		),
	)
);

// outputs a large light spinner and a medium light spinner

If you need to build a loading spinner into a component, for example, you can use the following mixin:

@import '@financial-times/o-loading/main';

.my-loading-spinner {
	@include oLoadingContent(
		$opts: (
			'theme': 'light',
			'size': 'small',
		)
	);
}

Migration guide

State	Major Version	Last Minor Release	Migration guide
maintained	6	N/A	migrate to v6
╳ deprecated	5	5.2	migrate to v5
╳ deprecated	4	4.0.4	migrate to v4
╳ deprecated	3	3.1	migrate to v3
╳ deprecated	2	2.3	migrate to v2
╳ deprecated	1	1.0	-