特点：
1.无图片，无外部CSS
2.无依赖（支持jQuery,但非必须）
3.高度可配置
4.分辨率无关
5.旧版本IE不支持时，采用VML支持
6.使用关键帧动画，采用setTimeout()
7.兼容各种主流浏览器，包括IE6
8.MIT认证

spin.js动态创建进度条，可用来替换使用ajax加载gif图片

<body>

<div id="myspin"></div>

<script src="spin.js"></script>

<script>

var opts = {

  lines: 13, // 画的线条数

  length: 20, // 每条线的长度

  width: 10, // 线宽

  radius: 30, // 线的圆角半径

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

  rotate: 0, // 旋转偏移量

  direction: 1, // 1: 顺时针, -1: 逆时针

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

  speed: 1, // 转速/秒

  trail: 60, // Afterglow percentage

  shadow: false, // 是否显示阴影

  hwaccel: false, // 是否使用硬件加速

  className: 'spinner', // 绑定到spinner上的类名

  zIndex: 2e9, // 定位层 (默认 2000000000)

  top: 'auto', // 相对父元素上定位，单位px

  left: 'auto' // 相对父元素左定位，单位px

};

var target = document.getElementById("myspin");

var spinner = new Spinner(opts).spin(target)

</script>

</body>

spin（）方法初始化必须的HTML元素，并开始动画，如果目标元素作为一个参数传递，spinner将被作为第一

个子节点，添加到父节点，水平、垂直居中。

手动定位：
默认是水平、垂直居中，我们可以手动配置，初始化参数中的top和left.将会相对目标元素定位。

为了手动插入spinner到DOM节点中，调用spin()方法，不带任何参数，使用el属性访问HTML元素。如下：
var spinner = new Spinner().spin();
target.appendChild(spinner.el);
返回的是一个相对定位，高度为0的DIV[class="spinner"]元素，spinner的中心被定位到这个div的左上角。
看下火狐下的截图：

隐藏：
调用stop（）方法，可以移除spinner并停止动画。可以使用spin（）方法重新启用动画。

new Spinner().stop();
new Spinner().spin();//启用动画

jquery 插件的使用：

.fn.spin = function(opts) {

  this.each(function() {

    var $this = $(this),

        data = $this.data();

    if (data.spinner) {

      data.spinner.stop();

      delete data.spinner;

    }

    if (opts !== false) {

      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);

    }

  });

  return this;

};

实例：

<body>

<div id="myspin"></div>

<script src="jquery-1.8.3.min.js"></script>

<script src="spin.js"></script>

<script>

$.fn.spin = function(opts) {

  this.each(function() {

    var $this = $(this),

        data = $this.data();

    if (data.spinner) {

      data.spinner.stop();

      delete data.spinner;

    }

    if (opts !== false) {

      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);

    }

  });

  return this;

};

$("#myspin").spin({

  lines: 13, // 画的线条数

  length: 20, // 每条线的长度

  width: 10, // 线宽

  radius: 30, // 线的圆角半径

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

  rotate: 0, // 旋转偏移量

  direction: 1, // 1: 顺时针, -1: 逆时针

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

  speed: 1, // 转速/秒

  trail: 60, // Afterglow percentage

  shadow: false, // 是否显示阴影

  hwaccel: false, // 是否使用硬件加速

  className: 'spinner', // 绑定到spinner上的类名

  zIndex: 2e9, // 定位层 (默认 2000000000)

  top: 'auto', // 相对父元素上定位，单位px

  left: 'auto' // 相对父元素左定位，单位px

});

</script>

</body>

支持的浏览器：
Chrome
Safari 3.2+
Firefox 3.5+
IE 6,7,8,9
Opera 10.6+
Mobile Safari (iOS 3.1+)
Android 2.3+

最后究其源码：

使用即时函数，工厂模式，单例模式等设计模式。适应CommonJS

参考资料：
http://fgnass.github.io/spin.js/
http://www.myjqueryplugins.com/jquery-plugin/spinjs
https://github.com/fgnass/spin.js/

spin.js无图片实现loading进度条,支持但非依赖jquery的更多相关文章

  1. ASP.NET 给Web中的网页添加Loading进度条形式

    前段时间客户提了一个需求,要求给网站中某些功能添加进度条形式,因为某些功能查询的数据量太大,经常会出现点击Search按钮,但是没有任何反应的情况,会让用户以为网站挂掉了,导致投诉的事情发生,所以客户 ...

  2. Android loading进度条使用简单总结

    在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...

  3. 模态框的理解 ,jQ: loading,进度条, 省级联动 表单验证 插件

    模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: $('#box').ajax ...

  4. 仿UC浏览器图片加载进度条

    前几天用UC浏览器看新闻(无意中给UC打了广告),看到它的图片加载进度条,正好最近有时间,所以就自己写了一个. 效果图如下 进度条的底色和填充颜色都可以调整. 首先中间的笑脸作为一个整体,其实现代码如 ...

  5. JavaScript之Loading进度条

    一个loading进度条,定义一个fakeProgress方法,定位一个URL,然后setTimeout设置跳转时间我们就能看到我们要打开的URL网址了. 这个链接我就直接链接到我的新浪博客去了,算是 ...

  6. 采用formdata做跨域的、无刷新、带进度条的文件上传

    以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...

  7. Core Animation一些Demo总结 （动态切换图片、大转盘、图片折叠、进度条等动画效果）

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果 ...

  8. web前端js实现资源加载进度条

    进度条核心方法,通常j不考虑判断到100,根据项目中的图片数量可能有所差异所以到95就可以了 //根据图片load进度条 function loadingAsImgLength(){ var prec ...

  9. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

随机推荐

  1. HDU_1174——爆头,空间直线方程,直线到点的距离

    Problem Description gameboy是一个CS高手,他最喜欢的就是扮演警察,手持M4爆土匪的头.也许这里有人没玩过CS,有必要介绍一下“爆头”这个术语:所谓爆头,就是子弹直接命中对方 ...

  2. [北京周六见]10 家创业公司联合招 Partner-均融资 1 到 3 轮-薪酬股权可观-本周六举行欢迎来坐坐吃喝谈天 - V2EX

    [北京周六见]10 家创业公司联合招 Partner-均融资 1 到 3 轮-薪酬股权可观-本周六举行欢迎来坐坐吃喝谈天 - V2EX [北京周六见]10 家创业公司联合招 Partner-均融资 1 ...

  3. JAXB--学习1

    一.简介 JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实 ...

  4. （转）苹果iOS开发者账号过期临时解决方法

    苹果iOS开发者账号过期临时解决办法 苹果iOS开发者账号一年的费用是99美金,作者最近由于各种原因,导致renew没能在账号过期之前支付好,所以在账号过期等待renew的期间,试了试一些非正常手段, ...

  5. Java 泛型数组

    Java 不支持泛型数组.也就是说, List<String>[] ls = new ArrayList<String>[10]; 是不支持的,而 List<String ...

  6. 新版ADT出现appcompat_v7的问题

    问题 更新ADT至22.6.0版本号之后,创建新的安装项目,会出现appcompat_v7的内容.而且是创建一个新的内容就会出现. 事实上appcompat_v7是Google自己的一个兼容包.一个支 ...

  7. Windows下Hadoop的环境安装[转]

    1.下载并安装Cygwin,记得cygwin安装中要把SSH选择上,因为后面Hadoop会用到,不详述cygwin的安装过程.我是安装在D:\cygwin下 2.配置系统环境变量 在windows命令 ...

  8. 使用VS Code开发Angular 2应用程序所需配置文件的解析

    目录 package.json typings.json tsconfig.json launch.json settings.json tasks.json package.json: 这是项目的基 ...

  9. 转载——SQL Server数据库性能优化之SQL语句篇

    转载自:http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 1. 按需索取字段,跟“SELECT *”说拜拜 字段的提取一 ...

  10. 反射那些事儿——Java动态装载和反射技术

    一直以来反射都是只闻其声,却无法将之使用,近日尽心下来学习下,发现了很多精妙之处. Java动态装载和反射技术 一.类的动态装载 1.Java代码编译和执行的整个过程包含了以下三个重要的机制: ● J ...