Preloaders

A spinner and progress bars to keep users informed about application state.

Spinner

add aria-busy="true" to an element to add a spinner

Code Example

<span aria-busy="true">Loading</span>

Progress Bar

Code Example

<progress></progress>
<progress value="25" max="100"></progress>
<progress value="100" max="100"></progress>

Lazy Load

Images load as they come into view.

Code Example

 <img class="lazy-load" src="../../docs/images/lazyload/lazyload-16x9.png" data-src="your-image.jpg" alt="description">

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.