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
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.
-
Mostly. Sometimes not. It's complicated. ↩