<!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. Hibernate入门案例 增删改

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

  2. CF735D Taxes 哥德巴赫猜想\判定素数 \进一步猜想

    http://codeforces.com/problemset/problem/735/D 题意是..一个数n的贡献是它的最大的因子,这个因子不能等于它本身 然后呢..现在我们可以将n拆成任意个数的 ...

  3. 【微信Java开发 --1】内网穿透外网，使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  4. Codeforces Round #375 (Div. 2) - C

    题目链接:http://codeforces.com/contest/723/problem/C 题意:给定长度为n的一个序列.还有一个m.现在可以改变序列的一些数.使得序列里面数字[1,m]出现次数 ...

  5. [BZOJ 2957]楼房重建（THU2013集训）（分块思想）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2957 分析: 首先明确问题,对于每栋楼房的斜率K=H/X,问题就是问有多少个楼房的K比前面所有 ...

  6. RedHat5.1下安装Seismic Unix44R1

    以前安装过好几次,在这里总结下.不足之处,欢迎批评指正. 用su44用户登录,修改环境变量(~/.bash_profile文件中添加) export CWPROOT=/home/`whoami`/cw ...

  7. 对于for的一些认识

    /*▲            ▲▲            ▲▲▲            ▲▲▲▲            ▲▲▲▲▲            ▲▲▲▲▲▲*/例:如图用for嵌套打印一个三 ...

  8. IconFont和FontAwesome的区别？

    一.[Iconfont] Iconfont支持所有低版本浏览器: Iconfont的图标库更大: Iconfont可以用自己上传的svg,但是要花费大量时间和耐心去设计AI图标: Iconfont的使 ...

  9. 餐厅点餐系统app第二天

    队友: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...

  10. 每天一个linux命令---netstat

    中间件访问第三方服务,经常出现连不上的情况.可以增加监控,当出现异常的时候触发一些动作通知程序员 例如:  要在app 部署的主机上,应该登录 172.16.210.52 后运行  netstat - ...