Origami Frontend Components & Services

Readme: o-loading

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

Usage

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.


Contact

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.


Licence

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

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 bower install --save "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