spin.js插件的转圈加载效果
先上插件链接地址：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插件的转圈加载效果的更多相关文章
- js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用
js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- dropload.js（上拉加载插件使用过程中遇到的坑）
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- js图片加载效果（延迟加载+瀑布流加载）
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- 使用 SVG 实现一个漂亮的页面预加载效果
今天我们要为您展示如何使用 CSS 动画, SVG 和 JavaScript 创建一个简单的页面预加载效果.对于网站来说,这些预载入得画面提供了一种创造性的方法,使用户在等待内容加载的时候不会那么无聊 ...
- 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器
JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...
随机推荐
- 基于UDP协议的控制台聊天
这几天学了java的网络编程弄出一个基于UDP协议的聊天工具 功能 添加并且备注好友(输入对方的ip) 删除好友 查看好友列表 用java写的控制台程序导出可执行程序后不能双击打开 还需要些一个脚本文 ...
- Ruby on Rails Session 1: How to Build a Ruby on Rails on the Ubuntu.
About Ruby on Rails Ruby on Rails is an application stack that provides developers with a framework ...
- Using Live555 to Stream Live Video from an IP camera connected to an H264 encoder
http://stackoverflow.com/questions/27279161/using-live555-to-stream-live-video-from-an-ip-camera-con ...
- Centos6 编译安装局域网NTP服务器
一.条件及环境: 1.CentOS:我用的是最新的CentOS 6.5 64位版,此教程应该也适用于RedHat 6及CentOS 6系列所有系统: 2.编译所需环境: 1 # yum -y inst ...
- Linux下常用I/O模型
Linux异步I/O是Linux内核中提供的一个相当新的增强.它是2.6版本内核的一个标准特性,异步非阻塞I/O背后的基本思想是允许进程发起很多I/O操作,而不用阻塞或等待任何操作完成.稍后或在接收到 ...
- [Python]网络爬虫（二）：利用urllib2通过指定的URL抓取网页内容
版本号:Python2.7.5,Python3改动较大. 所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 类似于使用程序模拟IE浏览器的功能,把URL作为HTTP请求的 ...
- bash的多行注释
:<<EOF 注释的代码... EOF 单行是#
- 自己封装的C#操作redis公共类
关于C#操作redis公共类,网上有很多版本,每个版本我都看了,发觉还是不够完美,都存在一个问题,只能操作单一的缓存数据库 redis指令支持上,这里可以自己去扩展,下面分享下我近期封装的一个redi ...
- Memcached笔记——（四）应对高并发攻击【转】
http://snowolf.iteye.com/blog/1677495 近半个月过得很痛苦,主要是产品上线后,引来无数机器用户恶意攻击,不停的刷新产品各个服务入口,制造垃圾数据,消耗资源.他们的最 ...
- Java中NaN和-0.0f的比较问题
简单的说,比较两个int型或long型的数据没有什么问题,可以用==来判断,但对浮点数(float与double)来说,需要对Float.NaN和0.0这个两个特殊数字作额外的处理.Float.NaN ...