Demo：
  
一、基础使用方法：
1、 在html的body中写一个容器div

[JavaScript] 纯文本查看 复制代码

 
 <!-- 写容器 -->
 <div id="foo" style="width:100px; height:200px; margin-left:100px;">
        </div>

2、 引入必要的JS文件

[JavaScript] 纯文本查看 复制代码

 <!-- 引入必要的JS文件 -->
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="spin.min.js"></script>

3、 在JS中使用

[JavaScript] 纯文本查看 复制代码

 $(function () {
                // 1、选择容器
                var target = document.getElementById('foo');
                // 2、实例化使用
                var spinner = new Spinner().spin(target);
            })

二、进阶配置
可自定义参数配置：

[JavaScript] 纯文本查看 复制代码

 $(function () {
                // 1、选择容器
                var target = document.getElementById('foo');
                // 2、实例化使用
                var opts = {
                    lines: 9, // 线条个数
                    length: 10, // 线条的长度
                    width: 10, // 线条的粗细
                    radius: 15, // 内圆的半径
                    corners: 1, // 线条圆角 （取值范围：0 ~ 1）
                    rotate: 0, // 偏移角度
                    color: '#000', // 颜色
                    speed: 1, // 转圈速度
                    trail: 100, // 消失速率
                    shadow: false, // 是否渲染阴影
                    hwaccel: true, // 是否硬件加速
                    className: 'spinner', // 类名
                    zIndex: 2e9, // z-index值 (默认：2000000000)
                    top: 'auto', // 相对父的top定位
                    left: 'auto' // 相对父的left定位
                };
                var target = document.getElementById('foo');
                var spinner = new Spinner(opts).spin(target);
            })

点击查看更多精彩前端资源

点击有惊喜

Demo：
  
一、基础使用方法：
1、 在html的body中写一个容器div

[JavaScript] 纯文本查看 复制代码

 
 <!-- 写容器 -->
 <div id="foo" style="width:100px; height:200px; margin-left:100px;">
        </div>

2、 引入必要的JS文件

[JavaScript] 纯文本查看 复制代码

 <!-- 引入必要的JS文件 -->
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="spin.min.js"></script>

3、 在JS中使用

[JavaScript] 纯文本查看 复制代码

 $(function () {
                // 1、选择容器
                var target = document.getElementById('foo');
                // 2、实例化使用
                var spinner = new Spinner().spin(target);
            })

二、进阶配置
可自定义参数配置：

[JavaScript] 纯文本查看 复制代码

 $(function () {
                // 1、选择容器
                var target = document.getElementById('foo');
                // 2、实例化使用
                var opts = {
                    lines: 9, // 线条个数
                    length: 10, // 线条的长度
                    width: 10, // 线条的粗细
                    radius: 15, // 内圆的半径
                    corners: 1, // 线条圆角 （取值范围：0 ~ 1）
                    rotate: 0, // 偏移角度
                    color: '#000', // 颜色
                    speed: 1, // 转圈速度
                    trail: 100, // 消失速率
                    shadow: false, // 是否渲染阴影
                    hwaccel: true, // 是否硬件加速
                    className: 'spinner', // 类名
                    zIndex: 2e9, // z-index值 (默认：2000000000)
                    top: 'auto', // 相对父的top定位
                    left: 'auto' // 相对父的left定位
                };
                var target = document.getElementById('foo');
                var spinner = new Spinner(opts).spin(target);
            })

点击查看更多精彩前端资源

点击有惊喜