This is an Origami component that provides a visual loading indicator.
Check out how to include Origami components in your project to get started with o-loading
.
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>
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':
And 'sizes':
@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'
));
}
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.