js等待加载转圈圈效果

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

css文件如下：

 

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：

需要显示转圈圈直接调用 showLoading(true);取消转圈圈直接调用showLoading(false);
--------------------- 
作者：醉卧_墙角 
来源：CSDN 
原文：https://blog.csdn.net/xzhchha/article/details/81034771 
版权声明：本文为博主原创文章，转载请附上博文链接！