css3的一个“加载中”例子

HTML部分：

<div class="upwarp " >

    <p class="upwarp-progress upwarp-rotate"></p>

    <p class="upwarp-tip">加载中..</p>

</div>

CSS部分：

.upwarp{

min-height: 30px;

padding:15px 0;

text-align: center;

}

.upwarp .upwarp-progress{

display:inline-block;

width:16px;

height:16px;

border-radius:50%;

border:1px solid gray;

border-bottom-color:transparent;

vertical-align:middle;

}

.upwarp .upwarp-tip{

margin-left:8px;

display:inline-block;

font-size:12px;

color:gray;

vertical-align:middle;

}

.upwarp-rotate{

animation:upwarpRotate .6s linear infinite;

-webkit-animation:upwarpRotate .6s linear infinite;

}

@-webkit-keyframes upwarpRotate{

0%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(360deg)}

}

@keyframes upwarpRotate{

0%{transform:rotate(0deg)}

100%{transform:rotate(360deg)}

}