# @financial-times/o-loading

> A visual loading indicator, available in two colours and four sizes

Latest version **6.0.1** (published 2026-02-26) · MIT license · 2.8K weekly downloads

## Install

```sh
npm install @financial-times/o-loading
pnpm add @financial-times/o-loading
yarn add @financial-times/o-loading
bun add @financial-times/o-loading
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: esm support; no vulnerabilities; growing popularity.

Warnings: no types.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2026-02-26 |
| First published | 2019-02-12 |
| Weekly downloads | 2.8K |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | the-ft, rowanmanning, chee, alexwilson, aendra, emmalewis, notlee, seraph2000, hamza.samih, robertboulton, robgodfrey |
| Keywords | loading, spinner, wait, loader |

## Links

- npm: https://www.npmjs.com/package/@financial-times/o-loading
- Homepage: https://registry.origami.ft.com/components/o-loading
- Issues: https://github.com/Financial-Times/origami/issues/new?labels=o-loading,components
- npm.io page: https://npm.io/package/@financial-times/o-loading

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads
- [@quenty/grouputils](https://npm.io/package/@quenty/grouputils.md) — 80 weekly downloads

## Recent versions

- 6.0.1 (latest) — 2026-02-26
- 5.0.0-beta.0 (prerelease) — 2021-04-29
- 6.0.0 — 2025-02-20
- 5.2.3 — 2023-10-27
- 5.2.2 — 2023-04-28
- 5.2.1 — 2022-01-13
- 5.2.0 — 2021-11-24
- 5.1.1 — 2021-11-08
- 5.0.2 — 2021-11-08
- 5.1.0 — 2021-11-08
- 5.0.1 — 2021-09-21
- 5.0.0 — 2021-06-21
- 5.0.0-0 — 2021-04-22
- 4.0.4 — 2020-08-07
- 4.0.3 — 2020-06-03
- … 8 more at https://npm.io/package/@financial-times/o-loading/versions

## README

# o-loading

This is an [Origami](http://origami.ft.com/) component that provides a visual loading indicator.

- [Usage](#usage)
- [Markup](#markup)
- [Sass](#sass)
- [Migration guide](#migration-guide)
- [Contact](#contact)
- [Licence](#licence)

## Usage

Check out [how to include Origami components in your project](https://origami.ft.com/documentation/components/#including-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.:

```html
<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:

```scss
@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

```scss
@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:

```scss
@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                    |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained |       6       |        N/A         | [migrate to v6](MIGRATION.md#migrating-from-v5-to-v6) |
| ╳ deprecated |       5       |        5.2         | [migrate to v5](MIGRATION.md#migrating-from-v4-to-v5) |
| ╳ deprecated |       4       |       4.0.4        | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) |
| ╳ deprecated |       3       |        3.1         | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) |
| ╳ deprecated |       2       |        2.3         | [migrate to v2](MIGRATION.md#migrating-from-v1-to-v2) |
| ╳ deprecated |       1       |        1.0         |                           -                           |

## Contact

If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-loading/issues), visit [#origami-support](https://financialtimes.slack.com/messages/origami-support/) or email [Origami Support](mailto:origami-support@ft.com).

## Licence

This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/@financial-times/o-loading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._