text-spinners Pure text, CSS only, font independent1, inline loading indicators

This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web. This is part of the tawian-frontend which is based on hack. Thanks to cli-spinners and hack!

Usage

<link rel="stylesheet" href="http://tawian.io/text-spinners/spinners.css">

or

npm install --save text-spinners

For better accessibility with screen readers add aria-hidden="true" or role="progressbar" aria-label="Loading…" to the loading element.

Types

Change Font:

Ellip (default)

<span class="loading"></span>

Dots

<span class="loading dots"></span>

Dots2

<span class="loading dots2"></span>

Dots3

<span class="loading dots3"></span>

Line

<span class="loading line"></span>

Line2

<span class="loading line2"></span>

Plus

<span class="loading plus"></span>

Lifting

<span class="loading lifting"></span>

Hamburger

<span class="loading hamburger"></span>

Bar

<span class="loading bar"></span>

Bar2

<span class="loading bar2"></span>

Circle

<span class="loading circle"></span>

Open-circle

<span class="loading open-circle"></span>

Arrow

<span class="loading arrow"></span>

Triangle

<span class="loading triangle"></span>

Triangles

<span class="loading triangles"></span>

Beam

<span class="loading beam"></span>

Bullet

<span class="loading bullet"></span>

Bullseye

<span class="loading bullseye"></span>

Rhomb

<span class="loading rhomb"></span>

Fish

<span class="loading fish"></span>

Toggle

<span class="loading toggle"></span>

Countdown

<span class="loading countdown"></span>

Time

<span class="loading time"></span>

Hearts

<span class="loading hearts"></span>

Earth

<span class="loading earth"></span>

Moon

<span class="loading moon"></span>

Monkey

<span class="loading monkey"></span>

Runner

<span class="loading runner"></span>

Box Bounce

<span class="loading box-bounce"></span>

Star

<span class="loading star"></span>

Matrix

<span class="loading matrix"></span>

Square

<span class="loading square"></span>

Words

<span class="loading words"></span>

How it works

Spinner

Every Spinner is a fixed sized element with a pseudo element whose content is set to the parts of the spinner divided by \A to create line breaks. Then a stepped keyframe animation shifts the pseudo element up one line-height per step.

  1. Mostly. Sometimes not. It's complicated. ↩