<!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

     <title></title>

     <style type="text/css">

         .container {

             width: 960px;

             margin: 0 auto;

             overflow: hidden;

         }

         /* Full Width Progress Bar */

         #content {

             width: 200px;

             height: 5px;

             margin: 50px auto;

             background: #ccc;

             border-radius:15px;

         }

         .fullwidth .expand {

             width: 200px;

             height: 1px;

             margin: 2px 0;

             /*background: #2187e7;*/

             background: #1463ad;

             position: absolute;

             box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.7);

             -moz-animation: fullexpand 10s ease-out;

             -webkit-animation: fullexpand 10s ease-out;

         }

         @-moz-keyframes fullexpand {

             0% {

                 width: 0px;

             }

             100% {

                 width: 200px;

             }

         }

         @-webkit-keyframes fullexpand {

             0% {

                 width: 0px;

             }

             100% {

                 width: 200px;

             }

         }

         /* Trigger button for javascript */

         .trigger, .triggerFull, .triggerBar {

             background: #000000;

             background: -moz-linear-gradient(top, #161616 0%, #000000 100%);

             background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);

             border-left: 1px solid #111;

             border-top: 1px solid #111;

             border-right: 1px solid #333;

             border-bottom: 1px solid #333;

             font-family: Verdana, Geneva, sans-serif;

             font-size: 0.8em;

             text-decoration: none;

             text-transform: lowercase;

             text-align: center;

             color: #fff;

             padding: 10px;

             border-radius: 3px;

             display: block;

             margin: 0 auto;

             width: 140px;

         }

             .trigger:hover, .triggerFull:hover, .triggerBar:hover {

                 background: -moz-linear-gradient(top, #202020 0%, #161616 100%);

                 background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);

             }

     </style>

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

     <script>

         $(document).ready(function () {

             //多久之后开始执行

             var duration = 10;

             $('#content').removeClass('fullwidth');

             $('.triggerFull').click(function () {

                 //清除使用了 finish() 方法之后的样式

                 $(".expand").removeAttr("style");

                 $('#content').removeClass('fullwidth').delay(duration).queue(function (next) {

                     $(this).addClass('fullwidth');

                     next();

                 });

                 return false;

             });

         });

         function finish()

         {

             $(".fullwidth .expand").css({ "-moz-animation": "fullexpand 1s ease-out", "-webkit-animation": "fullexpand 1s ease-out" });

         }     </script>

 </head>

 <body>

     <!-- FULL WIDTH -->

     <div id="content">

         <span class="expand"></span>

     </div>

     <a class="triggerFull" href="#">Start/Restart Animation</a>

     <!-- END FULL WIDTH -->

     <input type="button" value="finish" onclick="finish()" />

 </body>

 </html>

js 进度条，可实现结束和重新开始的更多相关文章

  1. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  2. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  3. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 在vue项目中使用Nprogress.js进度条

    NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress ...

  5. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  6. js进度条实现

    1.先设置CSS样式(可自定义) /*#region 进度条 */ .progbar { background-color: #e1e1e1; width:auto; color: #222; hei ...

  7. js 进度条效果

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>< ...

  8. js进度条插件pace.js

    主要用到themes文件夹和pace.js文件

  9. js进度条小事例

    <style> #div1{width: 500px;height: 20px;border: 1px solid gray;} #div2{height: 20px;width: 0px ...

随机推荐

  1. UI中 frame 与 transform的用法与总结

    在iOS中,我们是不可以直接访问控件中frame的结构体的成员的,因此我们需要分三步来改变一个UI控件的位置,大小 一.frame用法 frame的结构体类型为: struct CGRect { CG ...

  2. 【T_SQL】基础 续+

    十.模糊查询 1.LIKE --查询时,字段中的内容并不一定与查询内容完全匹配,只要字段中含有这些内容. SELECT StuName AS 姓名 FROM Stuinfo WHERE stuname ...

  3. 如何在MFC中添加对话栏

  4. 【Filter 不登陆无法访问】web项目中写一个过滤器实现用户不登陆，直接给链接，无法进入页面的功能

    在web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面,而重定向到登陆界面的功能. 项目是用springMVC+spring+hibernate实现 (和这个没有多大关系) 第一步: 首先 ...

  5. 【转】Linux 查看内存(free buffer cache)

    转自:http://elf8848.iteye.com/blog/1995638 Linux下如何查内存信息,如内存总量.已使用量.可使用量.经常使用Windows操作系统的朋友,已经习惯了如果空闲的 ...

  6. 手机页面的meta标签

    <meta charset="utf-8"/><meta name="viewport" content="width=device ...

  7. URAL1996 Cipher Message 3（KMP + FFT）

    题目 Source http://acm.timus.ru/problem.aspx?space=1&num=1996 Description Emperor Palpatine has be ...

  8. Linux下使用vsftp

    参考网址: http://wenku.baidu.com/view/4339434bc850ad02de80419c.html?re=view root用户无法ftp登录,显示530 Permissi ...

  9. UVa 10806 & 费用流+意识流...

    题意: 一张无向图,求两条没有重复的从S到T的路径. SOL: 网络流为什么屌呢..因为网络流的容量,流量,费用能对许许多多的问题进行相应的转化,然后它就非常的屌. 对于这道题呢,不是要没有重复吗?不 ...

  10. CUDA程序设计(二)

    算法设计:直方图统计 直方图频数统计,也可以看成一个字典Hash计数.用处不是很多,但是涉及CUDA核心操作:全局内存.共享内存.原子函数. 1.1  基本串行算法 这只是一个C语言练习题. #def ...