等待框load纯css效果

css部分：
<style type="text/css">
.main-site{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
}
#mainContent{
position: absolute;
width: 120px;
height: 100px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -60px;
}
#mainContent>p{
margin-left: 6px;
color: #EF7F00;
font-size: 1.4rem;
font-weight: bold;
}
.loader {
        width:50px;
        height:50px;
        border-radius:50%;
        margin:3em;
        display:inline-block;
        position:relative;
        vertical-align:middle;
    }
    .loader,.loader:before,.loader:after {
        animation:1s infinite ease-in-out;
    }
    .loader:before,.loader:after {
        width:100%;
        height:100%;
        border-radius:50%;
        position:absolute;
        top:0;
        left:0;
    }
    .loader-black {
        background-color: #EF7F00;
    }
    /* Loader 5 */

    .loader-5 {
        animation:loader5 1s infinite linear;
    }
    @keyframes loader5 {
        0% {
            transform:rotate(0deg);
            border-radius:50%;
        }
        50% {
            transform:rotate(90deg);
            border-radius:0%;
        }
        100% {
            transform:rotate(180deg);
            border-radius:50%;
        }
</style>








html部分：
<!--等待框-->
<div class="main-site">
    <div class="main-content space-top wrapper" role="main" id="mainContent">
        <div class="loader loader-black loader-5"></div><p>正在拼命加载中...</p>
    </div>

</div>

效果图：

因笔者不会截取动态图片，只能放静态的效果图了，黄框会旋转及调整边框倒角，具体效果可自行测试，颜色及文字大小等可直接在css中修改。