hang-tight v2.0.0

Hang tight :call_me_hand:

Pure CSS Loaders

$ npm install --save hang-tight

Usage

This package is purely CSS and nothing else. Simply add the desired class to a div and hang-tight's css will do the rest. Each loader should have the following attributes set:

• role="progressbar"
• aria-valuetext ("Loading" for example)
• aria-busy=true (when in the loading state)
• aria-valuemin
• aria-valuemax

Loaders

dots

<div
  class="hang-tight__dots"
  role="progressbar"
  aria-valuetext="Loading"
  aria-busy="true"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

sliding-bars

<div
  class="hang-tight__sliding-bars"
  role="progressbar"
  aria-valuetext="Loading..."
  aria-busy="true"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-describedby="sliding-bars-loading-text"
>
  <span id="sliding-bars-loading-text">Loading...</span>
</div>

spinning-circles

<div
  class="hang-tight__spinning-circles"
  role="progressbar"
  aria-valuetext="Loading..."
  aria-busy="true"
  aria-valuemin="0"
  aria-valuemax="100"
>
</div>

ripple

<div
  class="hang-tight__ripple"
  role="progressbar"
  aria-valuetext="Loading..."
  aria-busy="true"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div></div>
  <div></div>
</div>

waves

<div
  class="hang-tight__wave"
  role="progressbar"
  aria-valuetext="Loading..."
  aria-busy="true"
  aria-valuemin="0"
  aria-valuemax="100"
>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>