<!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>
body,div {

    padding:;

    margin:;

}

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);

}     window.onload = function() {
      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);

}

运行结果:http://landingpage.hdtmedia.com//learning/20150612/loading.html

用jquery制作加载条的更多相关文章

  1. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  2. 一款纯css3实现的条纹加载条

    之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...

  3. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  4. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  5. jQuery自动加载更多程序

    1.1.1 摘要 现在,我们经常使用的微博.微信或其他应用都有异步加载功能,简而言之,就是我们在刷微博或微信时,移动到界面的顶端或低端后程序通过异步的方式进行加载数据,这种方式加快了数据的加载速度,由 ...

  6. jquery动态加载问题

    对于append的元素,原有的方法不生效 解决:用on方法 找到的:http://www.zhidao91.com/jquery-html-live-on/ 解决使用jQuery采用append添加的 ...

  7. jQuery+zTree加载树形结构菜单

    jQuery+zTree加载树形结构菜单 由于项目中需要设计树形菜单功能,经过一番捣腾之后,终于给弄出来了,所以便记下来,也算是学习zTree的一个总结吧. zTree的介绍: 1.zTree 是利用 ...

  8. (转载) jQuery 页面加载初始化的方法有3种

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  9. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

随机推荐

  1. VS2012 运行项目在IE中可以运行，但是在google和firefox却不能打开。

    笔记本重装了系统之后,打开VS2012 调试的时候,发现在IE下能够运行调试.net项目,但是使用google和firefox的时候却不能打开项目.苦思冥想不知道是怎么回事儿,后来经过在网上查阅各种资 ...

  2. session问题和JSP

    session问题和JSP 07. 五 / J2EE / 没有评论   一.Session开发中遇到的问题1.内存中的Session非常多,怎么办?2.用户在购物中.服务器停掉了该web应用(或者重新 ...

  3. JQuery validator扩展

    //validator 扩展 jQuery.validator.addMethod("mail", function(value, element, messages) { ret ...

  4. POJ1094 拓扑排序

    问题:POJ1094   本题考查拓扑排序算法   拓扑排序:   1)找到入度为0的点,加入已排序列表末尾: 2)删除该点,更新入度数组.   循环1)2)直到 1. 所有点都被删除,则找到一个拓扑 ...

  5. WPF & ArcGIS Engine三维开发入门攻略

    原文 http://www.cnblogs.com/Realh/archive/2010/12/14/1906112.html 前些日子在做ESRI的开发大赛,从刚开始接触ArcGIS Engine( ...

  6. 常用财务软件：用友，金蝶，新中大，速达，管家婆，金算盘，远方，远光，金钥匙，润衡，浪潮，上海博科，易商，任我行，千方百剂，智管，小蜜蜂，SAP，ORACLE，SSA，QAD，MAPICS，JDE。

    常用财务软件:用友,金蝶,新中大,速达,管家婆,金算盘,远方,远光,金钥匙,润衡,浪潮,上海博科,易商,任我行,千方百剂,智管,小蜜蜂,SAP,ORACLE,SSA,QAD,MAPICS,JDE. 申 ...

  7. 【转】如何定制android源码的编译选项 & 后期安装？ ---- 不错

    原文网址:http://blog.sina.com.cn/s/blog_3e3fcadd0100z3o9.html Android编译过程比较长,配置起来也很麻烦.现仅就工作遇到的问题做个总结.所用硬 ...

  8. 【剑指offer】面试题23：从上往下打印二叉树

    题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: bfs,队列. 注意,队列最后不要忘了pop(). 代码: /* struct TreeNode { int val; stru ...

  9. (续)一个demo弄清楚位图在内存中的存储结构

    本来续---数字图像处理之位图在计算机中的存储结构一文,通过参考别人的代码,进行修改和测试终于成功运行. 该实例未使用任何API和相关类,相信如果对此实例能够完全理解那么将有进一步进行数字图像处理的能 ...

  10. find -exec

    find -exec 的标准写法 find ./ -name "*.tmp" -exec rm -rf "{}" \; find -exec 这个命令组合很好用 ...