Origami Frontend Components & Services

Readme: o-loading

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


Loading indicators come in the following themes:

And the following sizes:

Mixins, silent mode and classes

Mixins and silent mode are only available if you're including o-loading in your project using Bower. If you're using o-loading via the build service, you must use the o-loading classes instead. Both are documented below.

Full documentation of mixins and variables

Default loading indicator

<div class="o-loading o-loading--light o-loading--small"></div>
$o-loading-is-silent: false;
@import 'o-loading/main';

Custom loading indicator

@import 'o-loading/main';

.my-custom-indicator {
    @include oLoading();
    @include oLoadingSize('small');
    @include oLoadingColor('light');

Migration guide

Migrating from 1.X.X to 2.X.X

V1 -> V2 introduces the new majors of o-colors. Updating to this new version will mean updating any other components that you have which are using o-colors. There are no other breaking changes in this release.


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.


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

active Origami v1
Switch component view

GitHub Repository

Install o-loading

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

If running a Manual Build, run npm install "o-loading@^2.2.2".

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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com