仿YouToBe给页面顶部加一个进度条

http://jsfiddle.net/42NYX/

首先是css部分

我们需要一个div，也就是进度条的div

div {position: absolute;top: 0px;left: 0px;width: 100%;height: 4px;background-color: red;-webkit-transform: translate3d(-100%, 0px, 0px);
}

两个button

<section><Button id="start">start</Button><Button id="stop">stop</Button></section>

section {margin: 0 auto;text-align: center;height: 300px;width: 100%;line-height: 300px;
}

js部分，具体讲解注释中写的有

$(function(){  var status = false; //控制停止  var i = 100;//计数器  $("#start").click(function(){  status = false;  i = 100;  $("div").show();  work();  $(this).attr("disabled",true);  })  $("#stop").click(function(){  stop();  })  var work = function(){  if (status) return; //如果status变位true，证明停止  var obj = {  transition: "all 200ms ease",  transition: "all 200ms ease",  transform: "translate3d(-"+i+"%, 0px, 0px)"//这里用css3的translate3d是为了进度条的长度永远不会超过页面的宽度，TD：换成width  };  $("div").css(obj);  if (i <= 1) {  i = Math.random(0,i);//在进度条即将结束时加一个无限在最近处循环的条件  } else {  i--;  }  setTimeout(work,220);  }  var stop = function(){  status = true;  var obj = {  transition: "all 200ms ease",  transition: "all 200ms ease",  transform: "translate3d(0%, 0px, 0px)"  };//结束方法  $("div").css(obj);  setTimeout(function() {  $("div").fadeOut();  $("#start").attr("disabled",false);  }, 200);  }
})

以上是自己手写的，更好的效果可以查看插件地址：

http://ricostacruz.com/nprogress/

仿YouToBe给页面顶部加一个进度条相关推荐

【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
bootstraptable treeGrid 懒加载_为 Vue 的惰性加载加一个进度条
简介通常用编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 CSS 文件)都会被一起加载.在处理大文件时,这可能会导致用户体验不佳. 借助 Webpack,可以 ...
vue导出excel加一个进度条_运用vue导出excel碰到的那些坑
需求: Vue+element UI el-table下的导出当前一切数据到一个excel文件里. 先根据网上的要领,看看有哪些坑准备工作: 1.装置依靠:yarn add xlsx file-sa ...
vue导出excel加一个进度条_vue导出excel遇到的问题解决方法
本篇文章给大家带来的内容是关于vue导出excel遇到的问题解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求: Vue+element UI el-table下的导出当前 ...
nprogress 插件网页顶部加载进度条
文章目录效果(看顶部) 安装使用 1.基本用法 2.高级用法效果(看顶部) 安装 CSDN地址(我设置的免积分,推荐下载):https://download.csdn.net/download/ ...
python有趣的库_Python有趣的库tqdm，给程序加一个进度条吧！
Python开发过程中,经常会使用到大量的循环,如果能有个进度条提示我们当前程序执行到第几步了,这会是一个很有用的功能. tqdm在阿拉伯语中表示"progress",而在西班牙语 ...
Hexo博客NexT主题美化之顶部加载进度条
前言更多效果展示,请访问我的个人博客. 效果图: 教程进入博客文件夹的/themes/next文件夹下 cd /themes/next 复制代码下载安装Progress module,如下 g ...
vue导出excel加一个进度条_Vue实现在前端导出Excel
安装依赖进入项目文件夹,打开cmd或者在Webstorm中的Terminal中输入: npm install -S file-saver xlsx npm install -D script-loa ...

仿YouToBe给页面顶部加一个进度条

仿YouToBe给页面顶部加一个进度条相关推荐

最新文章

热门文章