本文主要是介绍js进度条插件之spin使用方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
下载地址：点击打开链接
直接出demo吧：这里面的spin.js是我下载的进度条插件，jquery-1.10.2.min.js是我方便使用而引用的jQuery插件。
<!DOCTYPE html>
<html>
<head><title>js</title><meta charset="utf-8"><script type="text/javascript" src="./js/spin.js"></script><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript">//opts 样式可从网站在线制作var opts = { lines: 13, // 花瓣数目length: 20, // 花瓣长度width: 10, // 花瓣宽度radius: 30, // 花瓣距中心半径corners: 1, // 花瓣圆滑度 (0-1)rotate: 0, // 花瓣旋转角度direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针color: 'white', // 花瓣颜色speed: 1, // 花瓣旋转速度trail: 60, // 花瓣旋转时的拖影(百分比)shadow: false, // 花瓣是否显示阴影hwaccel: false, //spinner 是否启用硬件加速及高速旋转 className: 'spinner', // spinner css 样式名称zIndex: 2e9, // spinner的z轴 (默认是2000000000)top: '25%', // spinner 相对父容器Top定位 单位 pxleft: '50%'// spinner 相对父容器Left定位 单位 px};var spinner = new Spinner(opts);$(document).ready(function () {$("#btnRequest").bind("click", function () {Request();});$("#btnRequest2").bind("click", function () {Request2();});})function Request(){//请求时spinner出现var target = $("#firstDiv").get(0);spinner.spin(target);}function Request2(){//关闭spinner spinner.spin();}</script>
</head>
<body><div id="Div"> <div id="firstDiv"> </div> <div id="secondDiv"> <input id="btnRequest" type="button" value="显示加载" class="btnStyle" /> <input id="btnRequest2" type="button" value="隐藏加载" class="btnStyle" /> </div> </div>
</body>
</html>>这篇关于js进度条插件之spin使用方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
