原生JS实现加载进度条

分享一个原生JS实现的动态加载进度条特效，效果如下：

实现的代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现加载进度条</title><style>#box {width: 300px;height: 40px;border: 1px solid #C8C8C8;background: white;position: relative;margin: 0 auto;margin-top: 100px;}#bar {position: absolute;left: 0;top: 0;z-index: 2;height: 40px;width: 100%;line-height: 40px;color: white;text-align: center;font-size: 20px;font-weight: bold;font-family: Georgia;clip: rect(0px, 0, 40px, 0px);background: #00A1F5;}#text {position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 40px;line-height: 40px;color: black;text-align: center;font-size: 20px;font-weight: bold;font-family: Georgia;}</style></head><body><div id="box"><div id="bar">0%</div><div id="text">0%</div></div><script>window.onload = function () {var percent = 0;// 设定定时器var timer = setInterval(function () {// 如果当前的值为100if (percent == 100) {// 清除定时器clearInterval(timer);} else {// 将当前状态值累加1percent += 1;// 调用执行状态的函数,传入状态值progress(percent);}}, 30);// 进度变化条function progress(percent) {// 获取容器var box = document.getElementById('box');// 获取进度条var bar = document.getElementById('bar');// 获取内层文字var text = document.getElementById('text');// 获取总进度条的宽度var allWidth = parseInt(getStyle(box, 'width'));// 设定内层两个div的文字内容一样bar.innerHTML = percent + '%';text.innerHTML = percent + '%';// 修改clip的宽度值bar.style.clip = 'rect(0px, ' + percent / 100 * allWidth + 'px, 40px, 0px)';};// 获取当前元素的属性值function getStyle(obj, attr) {// 兼容IEif (obj.currentStyle) {return obj.currentStyle[attr];} else {// 第二个参数为false是通用的写法，目的是为了兼容老版本return getComputedStyle(obj, false)[attr];}}};</script>
</body></html>

原生JS实现加载进度条相关推荐

【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
WKWebView Safari调试、JS互调、加载进度条、JS中alert、confirm、prompt
主要内容 Safari调试 swift/OC与JS互调增加加载进度条支持JS中alert.confirm.prompt Safari调试设置 -> safari --> 高级,开启J ...
浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
js网页顶部线性页面加载进度条,jquery头部线性进度条总结
前言网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式.网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条. 头部LoadingBar线性进度条总结上面的代码只是静态效 ...
pace.js – 加载进度条插件
这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况.此插件的兼容性很好,可以兼容 ...
pace.js网页自动加载进度条插件-好东西
pace.js – 网页自动加载进度条插件源码地址 https://github.com/HubSpot/pace 入Pace.js以及主题文件 Pace.js公开的API列表, Pace.star ...
NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
php+页面加载进度,基于jQuery实现模拟页面加载进度条_jquery
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

原生JS实现加载进度条

原生JS实现加载进度条相关推荐

最新文章

热门文章