纯文本Loading加载指示器特效 Pure text, CSS only, font independent, inline loading indicators

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

Stylesheet

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

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>

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.