<!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. Blog Starting...

    30出头,开始Blog记录学习生活的点滴,待40时再回来一看.

  2. 【MyEcplise SVN】myEcplise上安装SVN的多种方式

    第一种:SVN的在线安装 1.打开MyEclipse,找到顶部菜单栏 Help(帮助)-Install from Site-(从网站安装),如下图 2. 然后: 点击Install from Site ...

  3. Android中ViewPager+Fragment取消(禁止)预加载延迟加载(懒加载)问题解决方案

    转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53205878本文出自[DylanAndroid的博客] Android中Vie ...

  4. AchartEngine的柱状图属性设置

    1.      修改背景色或设置背景图片 背景色设置需要设置两项:setMarginsColor(设置四边颜色)以及setBackgroundColor(设置中间背景色) 设置背景图片:        ...

  5. 《DSP using MATLAB》示例Example5.5

    代码: %% ---------------------------------------------------------- %% START N=5 %% ------------------ ...

  6. SQL 最基本使用

    --创建表 CREATE TABLE TreeData (id INT IDENTITY(1,1) PRIMARY KEY , pid INT ) --为表添加列 ALTER TABLE treeda ...

  7. Ubuntu Mono 运行 Helloworld

    Ubuntu Mono 运行 Helloworld ref: http://www.mono-project.com/docs/getting-started/install/linux/#usage ...

  8. android NDK入门 windows下安装cygwin

    一.Android NDK环境简介 Android NDK 是运行于Android 平台上的Native Development Kit 的缩写. Android 应用开发者可以通过NDK 调用C 或 ...

  9. ACM 数独

    数独 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 数独是一种运用纸.笔进行演算的逻辑游戏.玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一 ...

  10. ACM: POJ 1401 Factorial-数论专题-水题

    POJ 1401 Factorial Time Limit:1500MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu   ...