写个div给他个基本样式：
1 <body> 2 <div class="load-container load" id="loader" > 3 <div class="loader">loading..</div> 4 </div> 5 </body>
1 <style> 2 body{ 3 vertical-align: baseline; 4 margin: 0; 5 padding: 0; 6 background: #0dcecb none repeat scroll 0 0; 7 color: #fff; 8 font-family: "Lato",sans-serif; 9 font-size: 62.5%; 10 11 } 12 .load-container { 13 border: 1px solid rgba(255, 255, 255, 0.2); 14 box-sizing: border-box; 15 /*float: left;*/ 16 height: 240px; 17 overflow: hidden; 18 position: relative; 19 width: 240px; 20 margin:100px 200px; 21 } 22 .load .loader, .load .loader:before, .load .loader:after { 23 animation: 1s ease-in-out 0s normal none infinite running load1; 24 background: #fff none repeat scroll 0 0; 25 height: 4em; 26 width: 1em; 27 } 28 29 .load .loader:before, .load .loader:after { 30 content: ""; 31 position: absolute; 32 top: 0; 33 } 34 .load .loader:before { 35 left: -1.5em; 36 -webkit-animation-delay: -0.32s; 37 animation-delay: -0.32s; 38 } 39 .load .loader:after { 40 left: 1.5em; 41 } 42 .load .loader { 43 text-indent: -9999em; 44 margin: 8em auto; 45 position: relative; 46 font-size: 11px; 47 -webkit-animation-delay: -0.16s; 48 animation-delay: -0.16s; 49 } 50 51 @-webkit-keyframes load1 { 52 0%, 53 80%, 54 100% { 55 box-shadow: 0 0 #FFF; 56 height: 4em; 57 } 58 40% { 59 box-shadow: 0 -2em #ffffff; 60 height: 5em; 61 } 62 } 63 @keyframes load1 { 64 0%, 65 80%, 66 100% { 67 box-shadow: 0 0 #FFF; 68 height: 4em; 69 } 70 40% { 71 box-shadow: 0 -2em #ffffff; 72 height: 5em; 73 } 74 } 75 76 </style>
效果图：
