先上插件链接地址：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. 武汉Uber优步司机奖励政策（2月1日~2月7日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. request&response笔记

    一.HttpServletResponse 1.代表了一个响应 2.应用: 2.1输出中文 字节流输出中文 //拿到输出字节流对象 ServletOutputStream oos = response ...

  3. 课程助理For Windows（预览版，正方教务系统学生查分工具）

    其实盖子已经开发了一个功能更强大的版本,但是那个版本依然基于正方系统,也就是说只要正方系统跪了或者张院士在网站上做点手脚,这个小工具就会失效. 今天给大家的版本虽然功能及其简单.界面极端丑陋,但是通过 ...

  4. shell查找文件并删除

    -mtime 0 表示文件改动时间距离当前为0天的文件.即距离当前时间不到1天(24小时)以内的文件. -mtime 1 表示文件改动时间距离当前为1天的文件,即距离当前时间1天(24小时-48小时) ...

  5. XML结构文件的读写

    附件:http://files.cnblogs.com/xe2011/XML_Writer_And_Read.rar 下面这段代码实现了以下功能 数据保存 textBox1的文本,textBox2的文 ...

  6. Java的finally理解

    1.为什么要用finally 先看一个没有finally的异常处理try-catch语句: 如果count为要使用到的资源,而且用完要求释放此资源.那么我们能够把释放资源的语句放到try-catch后 ...

  7. 征服 Redis + Jedis + Spring （三）—— 列表操作【转】

    一开始以为Spring下操作哈希表,列表,真就是那么土.恍惚间发现“stringRedisTemplate.opsForList()”的强大,抓紧时间恶补下. 相关链接: 征服 Redis 征服 Re ...

  8. Linux发送监控指标到内部邮箱

    数据库的健康监控是个很重要的工作.重要的指标\KPI监控结果会有专门的採集.监控.告警系统来做相关事情. 而一些不是很重要的或者还在设计和调试阶段的相关指标,我仅仅是想发送到我自己邮箱,本文就针对在s ...

  9. Yet Another 10 Common Mistakes Java Developers Make When Writing SQL (You Won’t BELIEVE the Last One)--reference

    (Sorry for that click-bait heading. Couldn’t resist ;-) ) We’re on a mission. To teach you SQL. But ...

  10. C# StringExt 字符串扩展

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...