o-loading

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

• Usage
• Markup
• Sass
• Migration guide
• Contact
• Licence

Usage

Check out how to include Origami components in your project to get started with o-loading.

Markup

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>

Sass

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:

'themes':

• light
• dark

And 'sizes':

• mini
• small
• medium
• large

@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

Contact

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.

Licence

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