先上插件链接地址：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. JAVA虚拟机简介

    Java虚拟机定义 Java虚拟机有多层含义 一套规范:Java虚拟机规范.定义概念上Java虚拟机的行为表现 一种实现:例如HotSpot,J9,JRockit.需要实现JVM规范,但具体实现方式不 ...

  2. Java 8 简明教程

    欢迎阅读我编写的 Java 8 介绍.本教程将带领你一步步认识这门语言的所有新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,Lambda表达式,方法引用和可重复注解.在这篇教程的最后 ...

  3. 【转】shell 教程——02 几种常见的Shell

    上面提到过,Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说 ...

  4. Linux达人养成计划1（第2章 Linux系统安装）

    2.3 系统分区之分区与格式化 1. 分区类型 主分区:最多只能有四个. 扩展分区: 最多只能有1个. 主分区加扩展分区最多有4个. 不能写入数据,只能包含逻辑分区. 逻辑分区: 2. 格式化(高级格 ...

  5. Spring Aop重要概念介绍及应用实例结合分析

    转自:http://bbs.csdn.net/topics/390811099 此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细 ...

  6. jetty-如何配置虚拟主机【转】

    jetty-如何配置虚拟主机[转]http://weifly.iteye.com/blog/1152688 官方配置:http://wiki.eclipse.org/Jetty/Howto/Confi ...

  7. Java的redis 操作类-优化通用版本

    java操作redis多节点处理方式;http://blog.itpub.net/29254281/viewspace-1188644/首先maven引入依赖包 <dependency> ...

  8. 使用 OpenSSL API 进行安全编程

    创建基本的安全连接和非安全连接 Kenneth Ballard ( kenneth.ballard@ptk.org), 自由程序员 Kenneth 是 Peru State College(位于 Pe ...

  9. python学习笔记--Django入门三 Django 与数据库的交互：数据建模

    把数据存取逻辑.业务逻辑和表现逻辑组合在一起的概念有时被称为软件架构的 Model-View-Controller (MVC)模式.在这个模式中, Model 代表数据存取层,View 代表的是系统中 ...

  10. 1个小时学会ReactiveCocoa基本使用

    来源:朱凯奇 链接:http://www.jianshu.com/p/5d966074741a 1.ReactiveCocoa简介 ReactiveCocoa(简称为RAC),是由Github开源的一 ...