css3加载spinner
使用代码制作一个加载旋转器spinner
实现的原理是：
1.两个圆圈，其中一个圆圈是使用pseudo元素（：before）产生
2.由pseudo元素生成的圆通过负数的z-index而作用在下面
3.由pseudo元素生成的圆圈有内置的阴影inset box-shadow
4.普通的圆圈有普通的阴影 regular box-shadow
5.“loading”是有overflow：hidden的strong标签
5.strong标签的长度由keyframe设置成动画，无限的reveal
6.文本通过line-height等于height的方法来垂直居中
7.旋转器是一个三角性，放在普通圆圈下面，以及放在由pseudo元素生成的圆圈的上面。
8.三角形通过keyframe设置成从0到360度无限旋转的动画。
理想状态下，三角形也应该设置成由pseudo元素生成，但是不幸的是到目前为止pseudo元素不支持动画。firefox可以transition它们，但是不能通过keyframe来设置动画（至少到目前为止不可以）。
效果图地址：https://css-tricks.com/examples/Loading/
html：
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Loading Thingy (WebKit)</title> <link rel='stylesheet' href='css/style.css'> <style> #loading { margin: 80px auto; position: relative; width: 100px; height: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #ccc; font: 12px "Lucida Grande", Sans-Serif; text-align: center; line-height: 100px; color: white; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); } #loading:before { content: ""; position: absolute; left: -20px; top: -20px; bottom: -20px; right: -20px; -webkit-border-radius: 70px; -moz-border-radius: 70px; border-radius: 70px; background: #eee; z-index: -2; -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2); -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.2); box-shadow: inset 0 0 10px rgba(0,0,0,0.2); } #loading span { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 80px solid rgba(255,255,255,0.7); z-index: -1; top: -28px; left: 0px; -webkit-animation: ticktock 5s linear infinite; -webkit-transform-origin: 50px 80px; } #loading strong { overflow: hidden; display: block; margin: 0 auto; -webkit-animation: expand 2.5s linear infinite; } @-webkit-keyframes expand { 0% { width: 0; } 100% { width: 60px; } } @-webkit-keyframes ticktock { 0% { -webkit-transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); } } </style> </head> <body> <div id="demo-top-bar"> <div id="demo-bar-inside"> <h2 id="demo-bar-badge"> <a href="/">CSS-Tricks Example</a> </h2> <div id="demo-bar-buttons"> </div> </div> </div> <div id="page-wrap"> <div id="loading"><strong>loading...</strong><span></span></div> </div> <style type="text/css" style="display: none !important;"> * { margin: 0; padding: 0; } body { overflow-x: hidden; } #demo-top-bar { text-align: left; background: #222; position: relative; zoom: 1; width: 100% !important; z-index: 6000; padding: 20px 0 20px; } #demo-bar-inside { width: 960px; margin: 0 auto; position: relative; overflow: hidden; } #demo-bar-buttons { padding-top: 10px; float: right; } #demo-bar-buttons a { font-size: 12px; margin-left: 20px; color: white; margin: 2px 0; text-decoration: none; font: 14px "Lucida Grande", Sans-Serif !important; } #demo-bar-buttons a:hover, #demo-bar-buttons a:focus { text-decoration: underline; } #demo-bar-badge { display: inline-block; width: 302px; padding: 0 !important; margin: 0 !important; background-color: transparent !important; } #demo-bar-badge a { display: block; width: 100%; height: 38px; border-radius: 0; bottom: auto; margin: 0; background: url(/images/examples-logo.png) no-repeat; background-size: 100%; overflow: hidden; text-indent: -9999px; } #demo-bar-badge:before, #demo-bar-badge:after { display: none !important; } </style> </body> </html>
css：
/* CSS-Tricks Example by Chris Coyier http://css-tricks.com */ * { margin: 0; padding: 0; } body { font: 14px Georgia, serif; } article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } #page-wrap { width: 960px; margin: 150px auto; }
原文：https://css-tricks.com/css3-loading-spinner/
