Hang tight

Accessible, pure css loaders.

npm install --save hang-tight hang-tight-react

Loaders with accessibility baked in. If using react, the below attributes will be set but can be overridden. If using HTML ensure the below attributes are set.

role="progressbar"
aria-valuetext="Loading"
aria-busy="true"
aria-valuemin="0"
aria-valuemax="100"

Enable amimation/motion

Dots

React

import { Dots } from 'hang-tight-react'

<Dots />

HTML

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

Squares

React

import { Squares } from 'hang-tight-react'

<Squares />

HTML

<div class="hang-tight__squares" 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>

Spinner

React

import { Spinner } from 'hang-tight-react'

<Spinner />

HTML

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

SpinningCircles

React

import { SpinningCircles } from 'hang-tight-react'

<SpinningCircles />

HTML

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

Ripple

React

import { Ripple } from 'hang-tight-react'

<Ripple />

HTML

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

EQ

React

import { EQ } from 'hang-tight-react'

<EQ />

HTML

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

SlidingBars

React

import { SlidingBars } from 'hang-tight-react'

<SlidingBars />

HTML

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

Waves

React

import { Waves } from 'hang-tight-react'

<Waves />

HTML

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