A visual loading indicator
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update circleci config to use occ for publishing (#22) Feb 12, 2019
.github
demos/src
src/scss
.gitignore Initial commit Sep 27, 2016
MIGRATION.md
README.md Correct "oLoadingContent" documentation. Feb 12, 2019
bower.json V3: Primary Mixin + new sizes (#19) Jan 9, 2019
main.scss
origami.json

README.md

o-loading CircleCI MIT licensed

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

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 '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 '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 'o-loading/main';

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

Migration

State Major Version Last Minor Release Migration guide
active 3 N/A migrate to v3
⚠ maintained 2 2.3 migrate to v2
╳ deprecated 1 1.0 N/A

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #ft-origami or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.