js写的loading

 

Demo下载  效果如图：

js：

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script language="javascript">
    $(function () {
        loading();
    })

    function loading() {
        var array = [];
        for (var i = 0; i < 12; i++) {
            array.push(245 - i * 8);
            $("#loading_dot" + (i+1)).css("background-color","rgb(" + array[i] + "," + array[i] + "," + array[i] + ")");
        }

        setInterval(run,80);

        function run() {
            var s = array.pop();
            array.unshift(s);
            for (var i = 0; i < 12; i++) {
                $("#loading_dot" + (i+1)).css("background-color","rgb(" + array[i] + "," + array[i] + "," + array[i] + ")");
            }
        }
    }

    </script>

css：

    #loading_box {
        width: 46px;
        height: 46px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -23px 0 0 -23px;
    }

    #loading_box span {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        display: block;
        position: absolute;
    }

    #loading_dot1 {
        top: 3px;
        right: 10px;
        background: #f5f5f5;
    }

    #loading_dot2 {
        top: 10px;
        right: 3px;
        background: #ededed;
    }

    #loading_dot3 {
        top: 50%;
        margin-top: -3px;
        right: 0;
        background: #e5e5e5;
    }

    #loading_dot4 {
        right: 3px;
        bottom: 10px;
        background: #dedede;
    }

    #loading_dot5 {
        right: 10px;
        bottom: 3px;
        background: #d6d6d6;
    }

    #loading_dot6 {
        bottom: 0;
        left: 50%;
        margin-left: -3px;
        background: #cfcfcf;
    }

    #loading_dot7 {
        left: 10px;
        bottom: 3px;
        background: #c7c7c7;
    }

    #loading_dot8 {
        left: 3px;
        bottom: 10px;
        background: #bfbfbf;
    }

    #loading_dot9 {
        top: 50%;
        margin-top: -3px;
        left: 0;
        background: #b8b8b8;
    }

    #loading_dot10 {
        top: 10px;
        left: 3px;
        background: #b0b0b0;
    }

    #loading_dot11 {
        top: 3px;
        left: 10px;
        background: #a8a8a8;
    }

    #loading_dot12 {
        top: 0;
        left: 50%;
        margin-left: -3px;
        background: #a1a1a1;
    }

html：

    <div id="loading_box">
        <span id="loading_dot1"></span>
        <span id="loading_dot2"></span>
        <span id="loading_dot3"></span>
        <span id="loading_dot4"></span>
        <span id="loading_dot5"></span>
        <span id="loading_dot6"></span>
        <span id="loading_dot7"></span>
        <span id="loading_dot8"></span>
        <span id="loading_dot9"></span>
        <span id="loading_dot10"></span>
        <span id="loading_dot11"></span>
        <span id="loading_dot12"></span>
    </div>

 

转载于:https://www.cnblogs.com/k13web/p/4139903.html