A visual loading indicator, available in two colours and four sizes
This is an Origami component that provides a visual loading indicator.
- Usage
- Markup
- Sass
- Migration guide
- Contact
- Licence
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.:
``html`
In order to output all of the variations in theme and size of o-loading, you'll need to include the following:
`scss
@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
`scss
@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:
`scss
@import '@financial-times/o-loading/main';
.my-loading-spinner {
@include oLoadingContent(
$opts: (
'theme': 'light',
'size': 'small',
)
);
}
``
| 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 | - |
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.