HTML添加loading提示页面小工具

HTML添加loading提示页面

loading页面添加小工具，做自己使用，使用方法：

1.使用时添加下面的代码到html页面，最好使用include方法

2.在需要提示的时候调用loading()方法

3.在需要取消提示的时候调用cancelloading()方法

4.需要替换为其他样式可以替换id为loading的div

<!--显示loading图标的方法-->
<script type="text/javascript">
    function loading() {
        showMask();
        letDivCenter();
    }

    function cancelloading() {
        $("#loading").hide();
        $("#mask").hide();
    }

    function showMask() {
        $("#mask").css("height", "100%");
        $("#mask").css("width", "100%");
        $("#mask").show();
    }

    //让指定的DIV始终显示在屏幕正中间
    function letDivCenter() {
        var top = ($(window).height() - $("#loading").height()) / 2;
        var left = ($(window).width() - $("#loading").width()) / 2;
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        $("#loading").css({position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft}).show();
    }
</script>

<!--loading图标样式-->
<style>
    svg {
        position: relative;
        width: 125px;
        height: 125px;
        margin: 25px;
        z-index: 2000;
        display: inline-block;
    }
    .mask {
        position: absolute;
        top: 0px;
        filter: alpha(opacity=60);
        background-color: #777;
        z-index: 1002;
        left: 0px;
        opacity: 0.5;
        -moz-opacity: 0.5;
    }
</style>

<!--loading图标-->
<div id="mask" class="mask"></div>
<div id="loading" hidden="hidden">
    <svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg" x="0px"
             y="0px"
             viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#1E90FF"
                  d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                <animateTransform attributeName="transform" attributeType="XML"
                                  type="rotate"
                                  dur="1s"
                                  from="0 50 50"
                                  to="360 50 50"
                                  repeatCount="indefinite"/>
            </path>
        </svg>
</div>

使用时需要注意javascript的运行机制（方法执行顺序）