样式1：
<html><head> ???<style type="text/css"> ???????.loading { ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????margin-top: -6px; ???????????margin-left: -30px; ???????} ???????.loading i { ???????????display: inline-block; ???????????float: left; ???????????width: 12px; ???????????height: 12px; ???????????border-radius: 12px; ???????????background-color: #999; ???????????margin: 0 4px; ???????????opacity: .1; ???????????-webkit-animation: flashPop .6s linear alternate infinite both; ???????????animation: flashPop .6s linear alternate infinite both; ???????} ???????.loading i:nth-of-type(2) { ???????????-webkit-animation-delay: .2s; ???????????animation-delay: .2s ???????} ???????.loading i:last-child { ???????????-webkit-animation-delay: .4s; ???????????animation-delay: .4s ???????} ???????@-webkit-keyframes flashPop { ???????????0% { ???????????????opacity: 1 ???????????} ???????????33% { ???????????????opacity: .5 ???????????} ???????????66% { ???????????????opacity: .1 ???????????} ???????} ???????@keyframes flashPop { ???????????0% { ???????????????opacity: 1 ???????????} ???????????33% { ???????????????opacity: .5 ???????????} ???????????66% { ???????????????opacity: .1 ???????????} ???????} ???</style></head><body> ???<div class="loading"> ???????<i></i> ???????<i></i> ???????<i></i> ???</div></body></html>
样式2：
<html><head> ???<style type="text/css"> ???????.loading { ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????margin-top: -6px; ???????????margin-left: -30px; ???????} ???????.loading>i { ???????????float: left; ???????????width: 12px; ???????????height: 12px; ???????????border-radius: 12px; ???????????background-color: #999; ???????????display: inline-block; ???????????-webkit-animation: bouncedelay 1.4s infinite ease-in-out; ???????????animation: bouncedelay 1.4s infinite ease-in-out; ???????????-webkit-animation-fill-mode: both; ???????????animation-fill-mode: both; ???????????margin: 4px; ???????} ???????.loading .bounce1 { ???????????-webkit-animation-delay: -0.32s; ???????????animation-delay: -0.32s; ???????} ???????.loading .bounce2 { ???????????-webkit-animation-delay: -0.16s; ???????????animation-delay: -0.16s; ???????} ???????@-webkit-keyframes bouncedelay { ???????????0%, ???????????80%, ???????????100% { ???????????????-webkit-transform: scale(0.0); ???????????} ???????????40% { ???????????????-webkit-transform: scale(1.0); ???????????} ???????} ???????@keyframes bouncedelay { ???????????0%, ???????????80%, ???????????100% { ???????????????transform: scale(0.0); ???????????????-webkit-transform: scale(0.0); ???????????} ???????????40% { ???????????????transform: scale(1.0); ???????????????-webkit-transform: scale(1.0); ???????????} ???????} ???</style></head><body> ???<div class="loading"> ???????<i class="bounce1"></i> ???????<i class="bounce2"></i> ???????<i class="bounce3"></i> ???</div></body></html>样式3：
<html><head> ???<style type="text/css"> ???????.loading { ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????margin-top: -6px; ???????????margin-left: -30px; ???????} ???????.circle { ???????????-webkit-animation: cui-loading 1.58s linear infinite; ???????????animation: cui-loading 1.58s linear infinite; ???????????-webkit-transform-origin: 50% 50%; ???????????transform-origin: 50% 50%; ???????????opacity: 0; ???????????width: 19px; ???????????height: 19px; ???????????border-left: #c5c5c5 1px solid; ???????????display: block; ???????????border-bottom: #c5c5c5 1px solid; ???????????border-radius: 50%; ???????} ???????@-webkit-keyframes cui-loading { ???????????0% { ???????????????opacity: 1; ???????????????-webkit-transform: rotate(0deg) ???????????} ???????????100% { ???????????????opacity: 1; ???????????????-webkit-transform: rotate(360deg) ???????????} ???????} ???????@-moz-keyframes cui-loading { ???????????0% { ???????????????opacity: 1; ???????????????-moz-transform: rotate(0deg) ???????????} ???????????100% { ???????????????opacity: 1; ???????????????-moz-transform: rotate(360deg) ???????????} ???????} ???????@-ms-keyframes cui-loading { ???????????0% { ???????????????opacity: 1; ???????????????-ms-transform: rotate(0deg) ???????????} ???????????100% { ???????????????opacity: 1; ???????????????-ms-transform: rotate(360deg) ???????????} ???????} ???????@keyframes cui-loading { ???????????0% { ???????????????opacity: 1; ???????????????transform: rotate(0deg) ???????????} ???????????100% { ???????????????opacity: 1; ???????????????transform: rotate(360deg) ???????????} ???????} ???</style></head><body> ???<div class="loading"> ???????<span class="circle"></span> ???</div></body></html>
样式4：
<html><head> ???<style type="text/css"> ???????.loading { ???????????position: fixed; ???????????top: 50%; ???????????left: 50%; ???????????margin-top: -6px; ???????????margin-left: -30px; ???????????width: 2em; ???????????height: 2em; ???????????color: inherit; ???????????vertical-align: middle; ???????????border: .3em solid #ffffff; ???????????border-top-color: #9C27B0; ???????????border-radius: 50%; ???????????-webkit-animation: 1s flashPop linear infinite; ???????????animation: 1s flashPop linear infinite; ???????} ???????.loading:before { ???????????content: ‘‘; ???????????display: block; ???????????width: inherit; ???????????height: inherit; ???????????position: absolute; ???????????top: -.3em; ???????????left: -.3em; ???????????border: .3em solid #9C27B0; ???????????border-radius: 50%; ???????????opacity: .5; ???????} ???????@-webkit-keyframes flashPop { ???????????0% { ???????????????-webkit-transform: rotate(0deg); ???????????????transform: rotate(0deg); ???????????} ???????????100% { ???????????????-webkit-transform: rotate(360deg); ???????????????transform: rotate(360deg); ???????????} ???????} ???????@keyframes flashPop { ???????????0% { ???????????????-webkit-transform: rotate(0deg); ???????????????transform: rotate(0deg); ???????????} ???????????100% { ???????????????-webkit-transform: rotate(360deg); ???????????????transform: rotate(360deg); ???????????} ???????} ???</style></head><body> ???<div class="loading"> ???</div></body></html>
css3实现不同的loading
原文地址：https://www.cnblogs.com/panyujun/p/9361790.html