active
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>| Bower Dependencies | |
|---|---|
| o-colors | ^4.2.3 |
| o-brand | >=2.2.0 <4 |
GitHub Repository
Quickstart
Build Service
Add the following to your
<link> tag
o-loading@^2.2.2
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.2.2"
For more information see the Origami build process.