<!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. 智能车学习（八）——菜单的实现

    一.代码分享 1.头文件 #ifndef __MENU_H #define __MENU_H /***********宏定义************/ //页面声明 typedef enum Menu ...

  2. 关于解决haswell赛扬和奔腾 不能安装的问题

    打开EFI\CLOVER\config.plist,并找到KernelAndKextPatches字段,在子集内插入下面代码. <key>FakeCPUID</key> < ...

  3. ubuntu安装中文支持

    sudo apt-get install language-pack-zh-hant language-pack-zh-hans

  4. 编写Redis启停服务脚本

    脚本内容如下; fi   esac   exit$RETVAL 下载脚本:艺搜下载 将下载下来的脚本放在/etc/init.d/目录下 更改脚本权限 chmod 777 /etc/init.d/red ...

  5. PHP、Java对称加密中的AES加密方法

    PHP AES加密 <?php ini_set('default_charset','utf-8'); class AES{ public $iv = null; public $key = n ...

  6. JSP 中 pageEncoding 和 charset 区别以及中文乱码解决方案

    一.JSP 中 pageEndcodeing 和 charset 的作用 <%@ page contentType="text/html;charset=GB2312"%&g ...

  7. 寻找房间中心zz

    Finding the Centroid of a Room Boundary It's been a while since my last post and I'm sure most of yo ...

  8. [linux]ubuntu 下安装RMySQL包

    http://downloads.mysql.com/docs/connector-odbc-en.pdf http://blog.csdn.net/ixidof/article/details/59 ...

  9. ACM: 强化训练-海贼王之伟大航路-dfs-枝减

    海贼王之伟大航路 Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Descriptio ...

  10. 给@dudu 一个idea

    好长时间没写文章了,因为我最近一直在琢磨博客园如何才能成为一家上市公司,上市前我在博客园买点原始股,说不定就发了.   现在遇到错误总是先谷歌,谷歌背墙,在百度,百度不到在到博客园找 找看看 因为找找 ...