web端加载样式

js

//打开

function showPageLoadingMsg(id)

{
        var loadingHtml = '<div id="loading"><div id="circular"><div id="circular_1" class="circular"></div><div id="circular_2" class="circular"></div><div id="circular_3" class="circular"></div><div id="circular_4" class="circular"></div><div id="circular_5" class="circular"></div><div id="circular_6" class="circular"></div><div id="circular_7" class="circular"></div><div id="circular_8" class="circular"></div><div class="clearfix"></div><span class="loadingTip">正在载入...</span></div></div>';
        $("body").append(loadingHtml);
        
      }

//关闭

  function hidePageLoadingMsg(id) {
        $("#loading").remove();
}

css

          
 /*loading 进度提示start*/
#loading{
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: black;
        -webkit-opacity: 0.8;
        z-index: 999;
        margin-left: auto;
        margin-right: auto;
        opacity: 0.8;
}

#circular{
        top: 50%;
        width: 10em;
        position: relative;
        border: 1px solid gray;
        padding: 0.5em;
        margin: 0 auto;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0, white),color-stop(1, #EFEFEF));
        /*background-color:white;*/
        -webkit-opacity: 1;
}
.circular{
        background-color:#5FB7FF;
        float:left;
        width:15px;        
        height:15px;        
        -webkit-border-radius:10px;
        -moz-border-radius:10px;
        -webkit-animation-name: bounce_circular;
         -webkit-animation-duration: 0.7s;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-direction: linear;
        }
#circular_1{
        margin-top:25px;
         -webkit-animation-delay: .3s;
}
#circular_2{
        margin-left:-8px;
        margin-top:9px;
         -webkit-animation-delay: .4s;
}
#circular_3{
        margin-top:1px;
         -webkit-animation-delay: .5s;
}
#circular_4{
        margin-left:0;
        margin-top:9px;
         -webkit-animation-delay: .6s;
}
#circular_5{
        margin-left:-8px;
        margin-top:25px;
         -webkit-animation-delay: .7s;
}
#circular_6{
        margin-left:-22px;
        margin-top:40px;
         -webkit-animation-delay: .8s;
}
#circular_7{
        margin-left:-37px;
        margin-top:48px;
         -webkit-animation-delay: .9s;
}
#circular_8{
        margin-left:-53px;
        margin-top:41px;
         -webkit-animation-delay: 1s;
}
.clearfix {
        clear: both;
        float: none;
}
.loadingTip{
        position: absolute;
        top: 42%;
        left: 3.8em;
        color:#005F7D;
        font-weight: bold;
}
@-webkit-keyframes bounce_circular{
        0%{-webkit-transform:scale(1);}
        100%{-webkit-transform:scale(.3);}
}