先上插件链接地址: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. 送干货,实用内联gulp插件——gulp-embed

    现在npm上有很多gulp内联工具,用于把脚本和样式内嵌到HTML页面上,之前搞项目我也在这些插件中寻觅许久,但均不满足公司项目的一个需求—— HTML上同时插入了开发(dev版,src文件夹下,比如 ...

  2. 配置 samba 实现文件共享

    用于实现文件共享 netstat -apn|grep smb 可以按到 smb服务,需要开启139 .445端口号 需要在防火墙添加如下规则vi /etc/sysconfig/iptables -A ...

  3. 表单和iframe的使用

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果.示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容.示例: 网页的拼接: 在一个网络页面 ...

  4. DOM浏览器文档模型

    DOM浏览器文档模型 1.对XHM/XHTML 编写成DOM文档 可形成动态网页 2.'*'获取所有节点 GetElementsByTagName():获取所有的标签名的集合--需要在js中使用win ...

  5. win10 uwp 存放网络图片到本地

    有时候我们的网络很垃圾,我的的UWP要在第一次打开网络图片,就把图片存放到本地,下次可以从本地打开. 有时候用户使用的是流量网络,不能每次都联网下载. 我们不得在应用存放用户打开的图片. 这就是先把图 ...

  6. Fiddler修改请求和响应

    通过设置断点,Fiddler可以做到: 1. 修改HTTP请求头信息.例如修改请求头的UA, Cookie, Referer 信息,通过"伪造"相应信息达到达到相应的目的(调试,模 ...

  7. 微信小程序开发和h5的区别

    1. 开发小程序时,每个页面一定要在app.json文件中注册,页面文件夹和其包含的四个文件的名字要保持一致. 2. 小程序发起的都是HTTPS网络请求,在开发调试的过程中可以不校验协议和TLS版本, ...

  8. LOJ 3089 「BJOI2019」奥术神杖——AC自动机DP+0/1分数规划

    题目:https://loj.ac/problem/3089 没想到把根号之类的求对数变成算数平均值.写了个只能得15分的暴力. #include<cstdio> #include< ...

  9. 前端面试题---vue部分

    1.vue的两大核心思想 组件化和数据驱动 2.如何理解vue中的MVVM模式 Model-View-ViewModel(简称为mvvm)是一种设计思想,model层代表数据模型,也可以再model中 ...

  10. Linux for python教程02

    目录 1. Linux用户及权限管理 1.1. who 1.2. 查看当前用户: whoami 1.3. 添加用户账号: useradd 1.4 切换用户 su 2.用户组 3. 修改文件权限: ch ...