先上插件链接地址：http://fgnass.github.io/spin.js/

以下是使用spin.js插件的完整版测试例子：

<!doctype html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>test_storage</title>

<script type="text/javascript" src="spin.min.js"></script>

<script type="text/javascript">

window.onload = function(){

    var opts = {

  lines: 13, // The number of lines to draw |小长条的数量

  length: 13, // The length of each line |小长条的长度

  width: 3, // The line thickness |小长条的宽度

  radius: 15, // The radius of the inner circle |内环的半径长

  corners: 1, // Corner roundness (0..1)

  rotate: 0, // The rotation offset |旋转角度

  direction: 1, // 1: clockwise, -1: counterclockwise |1：顺时针方向 -1：逆时针方向

  color: '#000', // #rgb or #rrggbb or array of colors |颜色

  speed: 1, // Rounds per second |每秒转多少圈

  trail: 60, // Afterglow percentage |余晖效果百分比

  shadow: false, // Whether to render a shadow |渲染阴影

  hwaccel: false, // Whether to use hardware acceleration |加速

  className: 'spinner', // The CSS class to assign to the spinner |类名spinner

  zIndex: 2e9, // The z-index (defaults to 2000000000) |显示在最顶层

  top: 'auto', // Top position relative to parent in px |相对父元素的top

  left: 'auto' // Left position relative to parent in px |相对父元素的left ，默认情况spinner是显示于父元素居中位置

};

var target = document.getElementById('foo');

var spinner = new Spinner(opts).spin(target);//给id为foo的div 中绑上spinner

//或者使用spinner.el属性插入DOM /* 如下 */
/*var spinner = new Spinner().spin();

target.appendChild(spinner.el);*/

//spinner.stop();//用来移除spinner，停止动画
} </script> </head> <body> <div id="foo" style="height:100px;"></div> </body> </html>

结果图如下所示：

spin.js插件的转圈加载效果的更多相关文章

  1. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  2. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  3. dropload.js（上拉加载插件使用过程中遇到的坑）

    dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...

  4. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  5. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  6. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  7. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

  8. 使用 SVG 实现一个漂亮的页面预加载效果

    今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...

  9. 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

随机推荐

  1. medoo数据库插入的问题

    今天遇到疾行客同学提出的medoo insert方法不能插入数据库问题,我测试了一下 发现是可以的 而INSERT INTO "t_user" (username) VALUES ...

  2. shell脚本采用crontab定时备份数据库日志

    测试服务器上才用定时脚本备份一个数据库 并打包压缩成tar避免文件过大 脚本如下: 测试服务器的shell backup_mysql.sh #!/bin/bash BASE_PATH=/alidata ...

  3. IT工作中工资最高和增长最快的是什么

    Staff在博客IT Jobs with the Highest Pay and Fastest Growth中画了个图说明IT工作中工资最高和增长最快的是什么.  

  4. 非堵塞socket实现android手机与PC的文件传输

    项目须要是通过WIFI建立手机和PC的通信,然后自己定义一个简单的协议对要传输的文件进行校验,传输的文件是2张3M的图片,要求考虑网络中断情况处理. 我这里採用的是非堵塞socket来实现的,之前查过 ...

  5. LED灯开关电路

    “灯控项目”中LED灯开关控制电路,LED供电电压12V,工作电流200mA. 电路图

  6. PMP考试的过与只是

    我在一年多时间里參加了三次PMP考试,前两次都失败,直到第三次才成功.怎样对待失败?这是每个人都会遇到的挑战.假设我们能用正确的态度对待临时的失败,那么终于的成功也就不远了.我希望通过本文与大家分享一 ...

  7. WTL 自定义 Button类-自绘

    WTL 自绘Button类,支持按钮三种形态,正常模式,hover模式,鼠标按下模式,支持png图片.使用方法很简单: MyButton* pButton = new MyButton;   pBut ...

  8. Windows2012中安装域控(DC) + SQL Server 2014 + TFS 2015

    安装域控(DC) 修改计算机名 修改固定IP 添加角色 选择“Role-based or feature-based installation” 选择本机 选择“Active Directory Do ...

  9. AppCan中两种获取信息的方法

    <div id="newsInfo">正在加载...</div> 1.JSON格式: [{'R': '1','NOTI_ID': '9','NOTI_TIT ...

  10. enable cors in spring mvc with swagger

    a. In controller add @CrossOrigin(origins = "http://localhost:8080") b. In mvc-servlet.xml ...