现在很多网站会用到进入网站特效，到网页没有加载完成的时候，会有一个loding特效，加载完了之后才能看到页面，今天就带着做一个js进度条效果，今天要做的效果是纯js进度条加载，没有用到框架，方便大家进行深入理解：
首先我们要进行js进度条的布局
js进度条布局如下：
</script>
<style type="text/css" id='css'>
#progress {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
#progress p {
width: 0px;
height: 30px;
border-radius: 3px;
background: #ffcccc;
color: #330000;
font-size: 14px;
font-weight: bold;
line-height: 30px;
text-align: center;
overflow: hidden;
font-family: 'Microsoft yahei';
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -250px;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<div id='progress'>
<p>0%</p>
</div>
</body>写完了之后，就要开始写js进度条加载的js代码了，代码如下：
var oP = document.getElementById('progress').getElementsByTagName('p')[0];
var oCss = document.getElementById('css');
function move(num) {
clearInterval(oP.timer);
oP.timer = setInterval(function () {
if (parseInt(oP.innerhtml) < num) {
var s = parseInt(oP.innerHTML) + 1;
var w = 500 * s / 100;
oP.innerHTML = s + '%';
oP.style.width = w + 'px';
} else {
clearInterval(oP.timer);
if (num == 100) {
oP.parentNode.parentNode.removeChild(oP.parentNode);
oCss.parentNode.removeChild(oCss);
var oScript = document.getElementsByClassName('pMove');
var length = oScript.length
for (var i = length - 1; i >= 0; i--) {
oScript[i].parentNode.removeChild(oScript[i]);
}
}
}
}, 10);
};
</script>因为考虑到js执行是有先后的顺序的，这里大家一定要注意才行
js进度条全部源码展示：
<style type="text/css" id='css'>
#progress {
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
#progress p {
width: 0px;
height: 30px;
border-radius: 3px;
background: #ffcccc;
color: #330000;
font-size: 14px;
font-weight: bold;
line-height: 30px;
text-align: center;
overflow: hidden;
font-family: 'Microsoft yahei';
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -250px;
}
body {
overflow: hidden;
}
</style>
</head>
<body>
<div id='progress'>
<p>0%</p>
</div>
<script>
//js进度条代码
var oP = document.getElementById('progress').getElementsByTagName('p')[0];
var oCss = document.getElementById('css');
function move(num) {
clearInterval(oP.timer);
oP.timer = setInterval(function () {
if (parseInt(oP.innerHTML) < num) {
var s = parseInt(oP.innerHTML) + 1;
var w = 500 * s / 100;
oP.innerHTML = s + '%';
oP.style.width = w + 'px';
} else {
clearInterval(oP.timer);
if (num == 100) { //js进度条代码等于100表示加载完成
oP.parentNode.parentNode.removeChild(oP.parentNode);
oCss.parentNode.removeChild(oCss);
var oScript = document.getElementsByClassName('pMove');
var length = oScript.length
for (var i = length - 1; i >= 0; i--) {
oScript[i].parentNode.removeChild(oScript[i]);
}
}
}
}, 10);
};
</script>
</body>
<script class='pMove'>
move(100); //执行到body，表示js进度条已经加载完成，遮罩层退场
</script>js进度条原理解析：
这里我们可以看到，进度条默认是0开始的，每走到一个地方，就会执行一个move函数，函数中有个数值，这个数值其实就是进度条走了多少了，我们可以去这样的分析，因为网站源代码是从上往下依次加载的，所以我们是不是就可以认为，让网页加载完成之后，页面加载进度就是100%了呢，我们在后面加上一个move(100)，正好就是执行完了，所以这个方法是非常巧妙的。
js进度条截取的图片如下：
CSS3+JS实现静态圆形进度条
首先，我们来一个圆（黑色）。接着，再来两个半圆，将黑色的圆遮住。（为了演示，左右两侧颜色不一样）,这时候，我们顺时针旋转右侧蓝色的半圆，下面的黑色圆就会暴露出来，比如我们旋转45度（12.5%），效果出来了。
原生JS+CSS或HTML5实现简单的进度条和滑动条效果
我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用js+css都能够在页面中进行模拟,并且方法也并不复杂.我这里进行了简单的效果实现,记录一下以作巩固.
html自定义拖动进度条，包含样式和事件
将 mousedown 事件绑定在进度条的包裹层而非进度条本身，这是参考了主流视频播放器的效果后的设计，为了优化用户体验,鼠标在滚动条外的移动，本文使用 clientX 来计算
jQuery 实现一个文章阅读进度条功能
阅读进度虽然没啥具体的用处，但是我突然想起来了，随便做做也是极好的,获取元素 offset 高度、元素高度、滑动距离就能实现了
利用canvas实现环形进度条
有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。
在vue项目中使用Nprogress.js进度条
NProgress是一款在网页顶部添加细长进度条的工具，非常轻巧，使用起来也非常便捷，灵感来源于Google, YouTube。在路由页面跳转使用，同样在main.js中：
svg生成环形进度条
之前在项目中遇到一个环形进度条的需求，要求能实时更新进度，脑海中瞬间便蹦出css，svg，canvas3中方案，对于3种方案个人更偏向于svg，用法简单，代码量也很少，同时也便于实时控制。具体效果如下图：
css进度条怎么写？
进度条经常运用于网页，即使我们意识到不是所有的东西都将瞬间被加载完成，这些进度条用于提醒使用者关于网页上具体的任务进程，譬如上传，下载，加载应用程序等。
AngularJS实现进度条功能示例
这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
纯css设置单选框/进度条样式
设置radio样式原理：使用 :checked+label 切换样式图片。checkbox也可以这么做。进度条样式原理：为三个页面的进度条分别设置不同的value，由此切换背景图片。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!