纯CSS制作的进度条，加载中，等待中等特效
纯文本，纯CSS，简单干净的加载中表示图符

用法

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

or

npm install --save text-spinners

请在目标元素上添加 aria-hidden="true" 或 role="progressbar" aria-label="Loading…"，这样能够提供屏幕阅读的友好性。

类型

点点点 (缺省)

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

点

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

点2

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

点3

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

线

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

线2

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

加号

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

电梯

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

汉堡包

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

条状

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

条状2

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

圆

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

半圆

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

箭头

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

三角

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

箭头

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

双线

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

小球

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

牛眼

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

菱形

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

鱼

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

开关

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

倒计时

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

时钟

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

心

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

地球

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

月亮

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

猴

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

跑

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

词语

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

技术原理

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.