先上插件链接地址：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. linux下在多个文件夹中查找指定字符串的命令

    例如,想要在当前文件夹下的多个.c或者.txt文件中查找“shutdown”字符串, 可以使用“grep shutdown ./*.c”或“grep shutdown ./*.txt”即可 使用fin ...

  2. Yii 的AR单行数据自动缓存机制

    相关的YII类: CActiveRecord CActiveRecordBehavior cache Active Record Active Record (AR) 是一个流行的 对象-关系映射 ( ...

  3. 【Struts2+Spring3+Hibernate3】SSH框架整合实现CRUD_1.3

    作者: hzboy192@192.com Blog: http://my.csdn.net/peng_hao1988 版本总览:http://blog.csdn.net/peng_hao1988/ar ...

  4. 【转载】Storm TickTuple 意外停止

    原文链接转自:http://woodding2008.iteye.com/blog/2328114 Storm的滑动窗口TickTuple通常用来控制bolt定制执行入库操作,使用过程中遇到了Tick ...

  5. JDBC——Sql Server

    sun公司设计一套java语言操作不同的数据库提供的是接口,二具体的实现类是由各大数据库厂商实现的. private static final String driver= "com.mic ...

  6. VS扩展CodeMaid代码整理插件

    本文章转载:http://www.cnblogs.com/wintersun/p/3577039.html 官方地址:http://www.codemaid.net/ 开源VS扩展CodeMaid介绍 ...

  7. Java程序猿学习C++之字符串

    #include <iostream> #include <string.h> using namespace std; int my_len(const char *str) ...

  8. Android中配置JDK和SDK的环境变量

    JDK环境变量的配置: 右击"计算机"或"我的电脑",选择"属性"-->"高级"或"高级系统设置&quo ...

  9. 在String中添加移动构造函数和移动赋值运算符

    13.50 没有定义析构函数 #include<iostream> #include<string> #include<memory> #include<ut ...

  10. (转载)为啥我们要学习Linux

    学习Linux也有一阵子了,这过程中磕磕撞撞的,遇到了问题,也解决了一些问题,学习的路子是曲折的,想总结点啥的,让刚刚学习Linux的不会望而生畏. 为啥我们要学习Linux 技术的价值不在于这个技术 ...