jQuery遮罩效果

最近开发了一套jquery遮罩效果，由于从来没总结过，所以还得现写。代码如下：

1.css代码

 .mask-layer {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0,0,0,.2);
            z-index: 999;
        }
        .waiting-icon {
            width: 25px;
            height: 25px;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 1000;
        }
        .waiting-icon span {
            width: 25px;
            height: 25px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 13px;
            -webkit-animation: spin 1s linear 0s infinite normal;
            -o-animation: spin 1s linear 0s infinite normal;
            -moz-animation: spin 1s linear 0s infinite normal;
            -ms-animation: spin 1s linear 0s infinite normal;
            animation: spin 1s linear 0s infinite normal;
            position: relative;
            z-index: 10000;
        }
        @keyframes spin {
            0% {
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg); }
            100% {
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); } }
        @-webkit-keyframes spin {
            0% {
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg); }
            100% {
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); } }
        @-moz-keyframes spin {
            0% {
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg); }
            100% {
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); } }
        @-ms-keyframes spin {
            0% {
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg); }
            100% {
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); } }
        @-o-keyframes spin {
            0% {
                -moz-transform: rotate(-360deg);
                -o-transform: rotate(-360deg);
                -ms-transform: rotate(-360deg);
                -webkit-transform: rotate(-360deg);
                transform: rotate(-360deg); }
            100% {
                -moz-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg); } }

2.html代码片段

<div id="loadingLayer" class="mask-layer" style="display:none;">
	    <div class="waiting-icon">
	        <span> <img src="<%=context%>/images/icon.png" /></span>
	    </div>
	</div>

3.jquery启动遮罩代码

$("#loadingLayer").show();

4.最后效果如下：