Loaders #

The Loader component is used to assure a user that content is being loaded — typically, when wait times are unknown due to an asynchronous data fetch or render cycle.

Usage #

To use AgnosticUI as a CSS only framework, you can simply link to the common.min.css and components.min.css files. These can be served from a CDN (as you'll see in the following example), or relative to your project.

Loading indicators #

When aria-busy is set to false, these will have zero opacity. We can use JavaScript to toggle the attribute to aria-busy="true" which will kick in CSS to set the corresponding opacity to 100%. For findability I have artificially set these to true but try using devtools and setting to false.

Loading indicator (small)

Loading indicator (default)

Loading indicator (large)

You can override the spinner color by setting the --agnostic-loading-color I've inlined it here for brevity but you can define it in your root definitions as well.

Spinners #

For manual testing, go ahead and devtools find one of the visually hidden spinners below, and change the aria-busy of the spinner to true to see it appear (there are 3 hidden spinners below; small, default, and large. Can you find 'em?)

I've set the next couple of spinners to aria-busy="true" for discoverability's sake :-)

You can override the spinner color by setting the --agnostic-spinner-color I've inlined it here for brevity but you can define it in your root definitions as well.

<p class="mbs24 mbe24">Loading indicators</p>
<div class="loader" role="status" aria-live="polite" aria-busy="true">
    <span class="screenreader-only">Loading...</span>
</div>
<div class="mbs24 mbe24"></div>
<p class="mbs24 mbe24">Loading indicator (large)</p>
<div class="loader loader-large" role="status" aria-live="polite" aria-busy="true">
    <span class="screenreader-only">Loading...</span>
</div>

<p class="mbs24 mbe24">Spinners</p>
<div class="spinner spinner-xlarge" role="status" aria-live="polite" aria-busy="true">
    <span class="screenreader-only">Loading...</span>
</div>
<p class="mbs16 mbe24">You can override the spinner color by setting the <code>--agnostic-spinner-color</code> I've inlined it here for brevity but you can define it in your root definitions as well.</p>
<div style="--agnostic-spinner-color: salmon;" class="spinner spinner-xlarge" role="status" aria-live="polite" aria-busy="true">
    <span class="screenreader-only">Loading...</span>
</div>