使用CSS与JavaScript实现动态进度条
本文介绍如何利用CSS和JavaScript结合实现一个动态的网页加载进度条。通过定义HTML结构，设置CSS样式控制外观，并使用JS定时器动态更新宽度与文本，模拟真实的加载过程。该方法无需依赖Flash或GIF，代码简洁且易于集成到现有项目中。
进度条的主要作用是在用户访问网站时，直观展示网页内容的下载或加载进度。虽然它能让用户的等待感知时间变长，从而弥补服务器响应慢的缺点，但如果服务器速度过慢，最根本的解决方案仍是优化或更换服务器。
常见进度条实现方式对比
目前常见的进度条实现方式主要有两种，下面分别举例说明。
第一种是利用Flash技术实现，这种方式在早期许多网站中较为常见，此处不再赘述。
第二种是通过动态GIF图片实现，例如微软官方下载页面曾使用此类效果，此处亦不做详细展开。
本文的重点在于演示如何仅使用CSS配合JavaScript来实现这一效果。
接下来直接开始具体实现步骤。
CSS与JavaScript实现步骤
首先，需要编写基础的HTML代码结构。
<div id="loading">
<strong id="loadcss"> 33%</strong>
</div>
接下来，编写对应的CSS代码以定义进度条的样式。
#loading {
width: 300px;
background-color: #000;
border : 2px solid #000;
}
上述CSS代码将进度条容器的背景色设置为黑色（#000），并添加了一个同样为黑色的边框，以此作为进度条的底色背景。
j
接下来，对内部元素 #loadcss 进行样式设计。
#loadcss {
display : block ; /*很重要, 弄成块*/
background-color: # 0df;
text-align : center;
}
这里的关键是将 display 设置为 block，使其成为块级元素。进度条的颜色由背景色 #0df 决定，文字居中显示。
此时进行预览，可以看到进度条的效果。
h
需要注意的是，目前的进度条是满状态显示的。
那么，如何让它动态显示加载进度呢？
这里可以通过一个巧妙的方法来实现。
对HTML代码稍作修改。
参考以下代码结构：
<div id="loading">
<strong id="loadcss" style="width:33%;"> 33%</strong>
</div>
通过为 #loadcss 设置内联样式 width:33%，即可在视觉上显示33%的进度。
虽然显示了比例，但它是静态不动的。接下来，我们将使用JavaScript来实现动态变化效果（注：此JS代码并非原创）。
<script language="JavaScript">
i=0;
function load () {
showload=setInterval("load()",500);
}
function setload(){
i+=5;
if (i>=100) {
clearInterval(showlaod);
}
document.getElementById("loadcss").style.width=i+"%" ;
document.getElementById("loadcss").innerHTML=i+"%";
}
</script>
这段JavaScript代码主要包含两个函数：load 函数用于启动进度条动画，setload 函数用于控制进度条的更新。
在 setload 中设置了一个计数器，每0.5秒运行一次 setload 函数，从而逐步增加进度值。
这段JavaScript代码应放置在HTML的HEAD部分，并在BODY标签中通过 onload 事件调用，即 <BODY ONLOAD="LOAD;">。
现在运行网页进行测试，观察是否成功实现了动态进度条效果。
AOS.js 动画不触发怎么办？排查 DOM 加载与移动端兼容问题
2026-11-05 17:02:26
sigma.js 怎么实现节点点击、拖拽与悬停提示交互
2026-11-05 15:03:27
Matter.js 与 PixiJS/Three.js 集成：分离物理计算与渲染
2026-11-05 13:43:48
主流JS弹幕库选型指南：Danmaku.js等库的功能与体积对比
2026-11-05 09:28:19
JavaScript点击事件监听与交互效果实例
2026-11-05 09:10:19