o-loading

A visual loading indicator

active

Standard loading spinner

The basic spinner is available in a light or dark theme in three sizes.

<h2>Light theme</h2>
<div class="demo">
	<div class="demo-card demo-card--light">
		<div class="o-loading o-loading--dark o-loading--small"></div>
	</div>
	<div class="demo-card demo-card--light">
		<div class="o-loading o-loading--dark o-loading--medium"></div>
	</div>
	<div class="demo-card demo-card--light">
		<div class="o-loading o-loading--dark o-loading--large"></div>
	</div>
</div>

<h2>Dark theme</h2>
<div class="demo">
	<div class="demo-card demo-card--dark">
		<div class="o-loading o-loading--light o-loading--small"></div>
	</div>
	<div class="demo-card demo-card--dark">
		<div class="o-loading o-loading--light o-loading--medium"></div>
	</div>
	<div class="demo-card demo-card--dark">
		<div class="o-loading o-loading--light o-loading--large"></div>
	</div>
</div>

Accessible markup demonstration

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

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

Quickstart

Build Service

Add the following to your <link> tag

o-loading@^2.1.2

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"@"^2.1.2"

For more information see the Origami build process.