spin.js进度条

来源：互联网发布：犀牛5.0破解软件编辑：程序博客网时间：2024/05/22 08:09

一、需求

页面异步加载，需要加载进度条。

二、分析

spin.js类库比较小，配置相对简单方便。

三、官网

spin.js官网

四、应用

1、spin.common.js

$(function(){        //在html生成 框体$(document.body).append("<div id='spinPreview'></div>");setPositon(); //设置位置居中});var spinner;var spinnerC = {start:function(){setPositon();spinner = new Spinner().spin(document.getElementById('spinPreview'));},stop:function(){spinner.spin();}};function setPositon(){var top = $(window).height()/2;var left = $(window).width()/2;var scrollTop = $(document).scrollTop();var scrollLeft = $(document).scrollLeft();$("#spinPreview").css({ 'position' : 'absolute', 'top' : top + scrollTop, 'left' : left + scrollLeft });}

页面引用

<script type="text/javascript" src="spin.min.js"></script><script type="text/javascript" src="spin.common.js"></script><script>  spinnerC.start();//调用loading  $.post("test.php", function(data){     spinnerC.stop();//结束loading });</script>

0 0