Origami Frontend Components & Services

Demos: o-loading

Standard Light loading spinner

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

<h3>Light theme</h3>
<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>

Standard Darkloading spinner

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

<h3>Dark theme</h3>
<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>
Switch component view

GitHub Repository

Install o-loading

If using the Build Service, add o-loading@^2.2.2 to your link tag.

If running a Manual Build, run bower install --save "o-loading@^2.2.2".

Help & Support

o-loading is maintained directly by the Origami team. If you have any questions about o-loading or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com