Origami Frontend Components & Services

Readme: o-loading

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 '@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:


And 'sizes':

@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
✨ active 5 N/A migrate to v5
⚠ maintained 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 N/A


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.

Switch component view

GitHub: o-loading@5.2.1

Install o-loading

If using the Build Service, add o-loading@^5.2.1 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-loading@^5.2.1".

Help & Support

o-loading is maintained directly by the Origami team. If you have any questions about o-loading or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com