平时常用的纯css3做的laoding效果

以下以前常用的两种css形式的css3做的loading效果，小计一下，是用css3的animation和transform:rotate去实现，具体看下面

1、第一种css形式

html:

<div class="loading-box">
	<div class="loading-mod"></div>
        <span>正在加载</span> 
</div>

2、第二种css形式

html:

<div class="go-loading">
	<div class="loading-mod loading-mod1"></div>
        <span>正在载入中…</span> 
</div>

html{ 
  	font-size: 62.5%;
  }
div,body,h3,p,span{
 	margin: 0;
 	padding: 0;
 	font-family: "微软雅黑";
 }
.main{
 	width: 800px;
 	height: auto;
 	overflow: hidden;
 	margin: 0 auto;
 }
h3{
 	 margin: 10px 0;
 	 font-size: 2rem;
 }
p{
 	 font-size: 1.6rem;
 }
 .loading-box {
	width:5rem;
	height: 5rem; 
    color: #fff;
    background: rgba(0,0,0,.6);
    padding: 1.5rem 2rem;
    border-radius: .5rem;
    font-size: 1.4rem;
    text-align: center;
}
.loading-mod {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border-top: .2rem solid rgba(255,255,255,.2);
    border-right: .2rem solid rgba(255,255,255,.2);
    border-bottom: .2rem solid rgba(255,255,255,.2);
    border-left: .2rem solid #fff;
    -webkit-animation: loading-1 .5s infinite linear;
    animation: loading-1 .5s infinite linear;
}
@keyframes loading-1{
	0%{-webkit-transform:rotate(0);transform:rotate(0)}
	100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
/*第二种形式*/
.go-loading{ 
	width: 150px; 
	height: 50px; 
	margin: 0 auto; 
	position: relative; 
}
.go-loading span{ 
	position: absolute; 
	left: 50px; 
	top: 2px;
	line-height: 30px;
}
.loading-mod1{ 
	margin: 0; 
	border-top: .2rem solid rgba(0,0,0,.3);
    border-right: .2rem solid rgba(0,0,0,.3);
    border-bottom: .2rem solid rgba(0,0,0,.3);
    border-left: .2rem solid #000;
}