o-loading CircleCI

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


Loading indicators come in the following themes:

  • light
  • dark

And the following sizes:

  • small
  • medium
  • large

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.