jquery实现加载进度条提示效果


Posted in Javascript onNovember 23, 2015

本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

jquery实现加载进度条提示效果

具体代码如下:

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8">
  <title>进度条</title>
  <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"></script>
 </head>

 <body>
  <div class="spinner"> </div> 
 </body>

</html>

css样式:

body,div {
 padding: 0;
 margin: 0;
}
div.spinner {
 position: absolute;
 width: 160px;
 height: 160px;
 margin-left: 240px;
 margin-top: 350px;
}
div.loaderdot {
 position: absolute;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: rgb(29, 140, 248);
}  1 window.onload = function() {

js代码:

var total = 16,
   angle = 3 * Math.PI,
   Radius = 80,
   html = '';
  var spinnerL = parseInt($("div.spinner").css("margin-left"));
  var spinnerT = parseInt($("div.spinner").css("margin-top"));
  for (var i = 0; i < total; i++) {
   //对每个元素的位置和透明度进行初始化设置
   var loaderL = Radius + Radius * Math.sin(angle) - 10;
   var loaderT = Radius + Radius * Math.cos(angle) - 10;
   html += "<div class='loaderdot' style='left:" + loaderL + "px;top:" + loaderT + "px; opacity:" + i / (total - 1) + "'></div>";
   angle -= 2 * Math.PI / total;
 }
 $("div.spinner").empty().html(html);
 var lastLoaderdot = $("div.loaderdot").last();
 timer = setInterval(function() {
   $("div.loaderdot").each(function() {
   var self = $(this);
   
 var prev = self.prev().get(0) ? self.prev() : lastLoaderdot,
    
 opas = prev.css("opacity");
   
 self.animate({
    
opacity: opas
   
}, 50);
   });
 }, 60);
27}

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 #Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 #Javascript
Jquery 效果使用详解
Nov 23 #Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
第1次亲密接触PHP5(2)
2006/10/09 PHP
一个MYSQL操作类
2006/11/16 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
2015/03/03 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解node-ccap模块生成captcha验证码
2017/07/01 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
python实现目录树生成示例
2014/03/28 Python
python在不同层级目录import模块的方法
2016/01/31 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python语言异常处理测试过程解析
2020/01/08 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python持续监听文件变化代码实例
2020/07/22 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
付款委托书范本
2014/10/05 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
学生会工作感言
2015/08/07 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
导游词之吉林花园山
2019/10/17 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python