js等待加载转圈圈效果



首先引入js文件，jquery.js和spin.js

css文件如下：

 <style type="text/css">
       
        #foo {
            position: fixed;
            left: 0;
            top: 0;
            _position: absolute;
            width: 100%;
            background: #000;
            opacity: 0.5;
            filter: alpha(opacity=50);
            z-index: 999;
            display: none;
        }

   
    </style>

js代码如下：

 var opts = {
            lines: 9, // The number of lines to draw
            length: 0, // The length of each line
            width: 10, // The line thickness
            radius: 15, // The radius of the inner circle
            corners: 1, // Corner roundness (0..1)
            rotate: 0, // The rotation offset
            color: '#fff', // #rgb or #rrggbb
            speed: 1, // Rounds per second
            trail: 60, // Afterglow percentage
            shadow: false, // Whether to render a shadow
            hwaccel: false, // Whether to use hardware acceleration
            className: 'spin', // The CSS class to assign to the spinner
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            top: '50%', // Top position relative to parent in px
            left: '50%' // Left position relative to parent in px
        };
        var spinner = new Spinner(opts);
        //显示与隐藏加载动画
        function showLoading(result) {
            var spinContainer = document.getElementById("foo");
            if (result) {
                var target = $(spinContainer).get(0);
                spinner.spin(target);
                spinContainer.style.height = document.documentElement.clientHeight + "px";
                $(spinContainer).show();
            } else {
                spinner.spin();
                $(spinContainer).hide();
            }
        }

 在body标签下放入如下div：

<div id="foo" style="width: 100%; height: 100%"></div>

需要显示转圈圈直接调用 showLoading(true);取消转圈圈直接调用showLoading(false);