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>
</body>
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>
</body>
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>