<!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. Android Studio 插件整理

    1.GsonFormat 快速将json字符串转换成一个Java Bean,免去我们根据json字符串手写对应Java Bean的过程. 使用方法:快捷键Alt+S也可以使用Alt+Insert选择G ...

  2. LoadRunner 事务函数

    status 包括LR_PASS, LR_FAIL,  LR_AUTO,  LR_STOP(这个没用过) lr_set_transaction_instance_status(status); 可以根 ...

  3. HDU 3374 最小/大表示法+KMP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3374 题意:给定一个串s,该串有strlen(s)个循环同构串,要求输出字典序最小的同构串的下标,字典 ...

  4. express－3 最佳实践

    版本控制 版本控制有以下益处: 文档: 能够回溯项目的历史,回顾所做的决策及组件的开发顺序,可形成宝贵的文档.记录项目的历史是十分有价值的. 归属: 团队工作,分工清晰,节省沟通成本. 试验: 你可以 ...

  5. js-DOM2，表单脚本

    DOM2: 1.DOM2中:创建一个完整的HTML文档 document.implementation.createHTMLDocument("new Doc"); alert(h ...

  6. BIT LA 4329 Ping pong

    题目传送门 题意:训练指南P197 分析:枚举裁判的位置,用树状数组来得知前面比它小的和大的以及后面比它小的和大的,然后O (n)累加小 * 大 + 大 * 小 就可以了 #include <b ...

  7. Uva401Palindromes

      Palindromes  A regular palindrome is a string of numbers or letters that is the same forward as ba ...

  8. myeclipse操作记录

    myeclipse里面jsp页面里面js注释快捷键 ctrl + shift +cctrl + / MyEclipse 每次保存都要building workspace的解决方法 方法一:菜单栏-&g ...

  9. ccc array

    setInterval可以用来设置函数的执行频率 nodeList: { default:[], type:[cc.Node] } active 可以用来设置是否启用 cc.Class({ exten ...

  10. ssh myeclipse的bug

    1 有时候复制完一个类的时候,myeclispe会少复制一些方法.很坑爹.复制的时候最好从新创建让后粘贴 2 有时候jsp页面经过修改该以后,在网页上显示的还是原来的页面,很坑爹.删掉tomcat然后 ...