A visual loading indicator


Standard Light loading spinner

The basic spinner is available in a light theme in four sizes.

<body class="demo--light">
	<div class="o-loading o-loading--light o-loading--mini"></div>
	<div class="o-loading o-loading--light o-loading--small"></div>
	<div class="o-loading o-loading--light o-loading--medium"></div>
	<div class="o-loading o-loading--light o-loading--large"></div>

Standard Darkloading spinner

The basic spinner is available in a dark theme in four sizes.

<body class="demo--dark">
	<div class="o-loading o-loading--dark o-loading--mini"></div>
	<div class="o-loading o-loading--dark o-loading--small"></div>
	<div class="o-loading o-loading--dark o-loading--medium"></div>
	<div class="o-loading o-loading--dark o-loading--large"></div>

Accessible markup demonstration

To see this working, open this demo in a new window.

<div class="demo" role="application">
		Clicking the button will show the loading indicator for a set time. The indicator has been marked up with all the appropriate ARIA attributes.
	<button class="demo-toggle demo-off">Start example</button>
	<div class="o-loading o-loading--dark" role="progressbar" aria-valuetext="loading" tabindex="0"></div>
Bower Dependencies
o-colors ^4.2.3
o-brand ^3.1.1
GitHub Repository


Build Service

Add the following to your <link> tag


How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-loading"@"^3.0.0"

For more information see the Origami build process.