A visual loading indicator
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update circleci config to use occ for publishing (#22) Feb 12, 2019
.gitignore Initial commit Sep 27, 2016
README.md Correct "oLoadingContent" documentation. Feb 12, 2019
bower.json V3: Primary Mixin + new sizes (#19) Jan 9, 2019


o-loading CircleCI MIT licensed

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


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>


In order to output all of the variations in theme and size of o-loading, you'll need to include the following:

@import '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:


  • light
  • dark

And 'sizes':

  • mini
  • small
  • medium
  • large
@import '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 'o-loading/main';

.my-loading-spinner {
	@include oLoadingContent($opts: (
		'theme': 'light',
		'size': 'small'


State Major Version Last Minor Release Migration guide
active 3 N/A migrate to v3
⚠ maintained 2 2.3 migrate to v2
╳ deprecated 1 1.0 N/A


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.