css3 loading组件

• 效果图
  
• HTML

<div class="loading">
    <i class="loading-icon"></i>
    <span class="loading-text">正在加载...</span>
</div>

• CSS

    .loading{
        position:fixed;
        top:50%;
        left:50%;
        margin-top:-20px;
        margin-left:-55px;
        z-index: 9;

        min-width:100px;
        height:20px;
        padding:10px 5px;
        text-align:center;
        line-height:20px;
        font-size:14px;
        color:#fff;
        border-radius:2px;
        -webkit-border-radius:2px;

        background:rgba(0,0,0,.7);
    }

    .loading-icon{
        display:inline-block;
        height:20px;
        width:20px;
        margin-right:2px;
        vertical-align:middle;
        background:url(loading.png) center no-repeat;
        background-size:20px 20px;
        animation: rotate .75s linear infinite;
        -webkit-animation: rotate .75s linear infinite;
    }

    @keyframes rotate{
        from {transform:rotate(0deg)}
        to {transform:rotate(360deg)}
    }

    @-webkit-keyframes rotate
    {
        from {-webkit-transform:rotate(0deg)}
        to {-webkit-transform:rotate(360deg)}
    }

搁这，用的时候直接copy。