利用 spin.js 生成等待效果(js 等待效果)


Posted in Javascript onJune 25, 2017

利用 js 生成一个界面友好的等待效果,使用 jquery 插件 spin.js,文章末尾有下载地址,下图是生成的效果截图,代码调用很简单。

利用 spin.js 生成等待效果(js 等待效果)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
 font-family: Helvetica, Arial, sans-serif; font-size: 12px;
}
#preview1 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
#preview2 {
 float: left; position: relative; background-color: #000; color: black; width: 220px; height: 220px; margin: 0 5px; border-radius: 20px;
}
</style>
<script src="jquery.min.js"></script>
<script src="spin.js"></script>
<script src="jquery.spin.js"></script>
<script type="text/javascript">
 // 对样式 #preview1 进行配置
 var opts1 =
 {
 lines : 12, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : '#efefef', // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : 'spinner', // CSS class to assign to the element
 top : '50%', // center vertically
 left : '50%', // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : 'absolute' // Element positioning
 };
 // 对样式 #preview2 进行配置
 var opts2 =
 {
 lines : 18, // The number of lines to draw
 length : 0, // The length of each line
 width : 11, // The line thickness
 radius : 40, // The radius of the inner circle
 scale : 1.0, // Scales overall size of the spinner
 corners : 0, // Roundness (0..1)
 color : 'red', // #rgb or #rrggbb
 opacity : 1 / 4, // Opacity of the lines
 rotate : 0, // Rotation offset
 direction : 1, // 1: clockwise, -1: counterclockwise
 speed : 1, // Rounds per second
 trail : 100, // Afterglow percentage
 fps : 20, // Frames per second when using setTimeout()
 zIndex : 2e9, // Use a high z-index by default
 className : 'spinner', // CSS class to assign to the element
 top : '50%', // center vertically
 left : '50%', // center horizontally
 shadow : false, // Whether to render a shadow
 hwaccel : false, // Whether to use hardware acceleration (might be buggy)
 position : 'absolute' // Element positioning
 };
</script>
<title>Insert title here</title>
</head>
<body>
 <div id="preview1" class="preview"></div>
 <div id="preview2" class="preview"></div>
</body>
<script type="text/javascript">
 $('#preview1').spin(opts1);
 $('#preview2').spin(opts2);
</script>
</html>

插件下载地址

https://github.com/fgnass/spin.js/

http://spin.js.org/

以上所述是小编给大家介绍的利用 spin.js 生成等待效果(js 等待效果),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 #Javascript
Angular中的interceptors拦截器
Jun 25 #Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 #Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 #Javascript
Angular2.js实现表单验证详解
Jun 23 #Javascript
JS实现多张图片预览同步上传功能
Jun 23 #Javascript
Vue组件化通讯的实例代码
Jun 23 #Javascript
You might like
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
AngularJS中使用three.js的实例详解
2017/07/21 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
python使用str &amp; repr转换字符串
2016/10/13 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
实例讲解python中的协程
2018/10/08 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
tensorflow 实现数据类型转换
2020/02/17 Python
基于Python测试程序是否有错误
2020/05/16 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
生物科学系大学生的自我评价
2013/12/20 职场文书
美术指导求职信
2014/03/17 职场文书
软件项目实施计划书
2014/05/02 职场文书
民生工作实施方案
2014/05/31 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android