4、进度条实现原理：HTML/CSS进度条设计、JavaScript动态更新进度、百分比与进度条联动

好，咱们进入第四讲。进度条这东西，看着简单，但真要做好，坑不少。

我记得刚入行那会儿，觉得进度条不就是个填充的矩形嘛，随便写写就完事了。结果被测试小姐姐追着打——进度条卡在99%不动了，用户以为程序死了。从那以后，我对进度条的设计就格外上心。

4.1 先聊聊进度条的本质

进度条说白了就三件事：

• 视觉反馈：告诉用户「我没死，我在干活」
• 量化进度：让用户知道「大概还要等多久」
• 心理安慰：嗯，这个很重要。用户看到进度条在动，焦虑感会下降很多

在3D网页里，进度条尤其关键。因为3D资源加载往往很慢，一个模型几兆甚至几十兆，用户等得不耐烦就直接关页面了。

4.2 HTML/CSS进度条设计

先看最基础的HTML结构。我个人习惯用两个嵌套的div：

<div class="progress-container">
  <div class="progress-bar" id="progressBar"></div>
</div>
<div class="progress-text">
  <span id="progressPercent">0%</span>
</div>

外层容器是轨道，内层是填充条。百分比文字单独放，方便控制样式。

CSS部分，我建议用渐变和过渡效果，让进度条看起来更流畅：

.progress-container {
  width: 100%;
  height: 24px;
  background: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border-radius: 12px;
  transition: width 0.3s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  text-align: center;
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}

4.3 JavaScript动态更新进度

现在来写核心逻辑。进度条更新的本质，就是不断修改进度条的宽度和百分比文字。

// 获取DOM元素
const progressBar = document.getElementById('progressBar');
const progressPercent = document.getElementById('progressPercent');

// 更新进度函数
function updateProgress(percent) {
  // 确保百分比在0-100之间
  const clampedPercent = Math.min(100, Math.max(0, percent));
  
  // 更新进度条宽度
  progressBar.style.width = clampedPercent + '%';
  
  // 更新百分比文字
  progressPercent.textContent = Math.round(clampedPercent) + '%';
  
  // 进度完成时的处理
  if (clampedPercent >= 100) {
    progressBar.style.background = 'linear-gradient(90deg, #43e97b, #38f9d7)';
    progressPercent.textContent = '加载完成！';
  }
}

// 模拟加载过程
let currentProgress = 0;
const interval = setInterval(() => {
  currentProgress += Math.random() * 5;
  updateProgress(currentProgress);
  
  if (currentProgress >= 100) {
    clearInterval(interval);
  }
}, 200);

4.4 百分比与进度条联动

联动其实不复杂，但有几个细节要注意。

首先，进度条和百分比文字必须用同一个数据源。我见过有人分别维护两个变量，结果进度条走到50%了，文字还显示30%。这种低级错误，用户一眼就能看出来。

// 正确的联动方式：统一数据源
class ProgressManager {
  constructor() {
    this._percent = 0;
    this.bar = document.getElementById('progressBar');
    this.text = document.getElementById('progressPercent');
  }
  
  set percent(value) {
    this._percent = Math.min(100, Math.max(0, value));
    this.render();
  }
  
  get percent() {
    return this._percent;
  }
  
  render() {
    this.bar.style.width = this._percent + '%';
    this.text.textContent = Math.round(this._percent) + '%';
  }
}

const manager = new ProgressManager();
// 使用方式
manager.percent = 50;  // 自动更新进度条和文字

其次，要考虑加载速度的平滑性。如果资源加载忽快忽慢，进度条会一跳一跳的。我建议加个缓冲机制：

// 平滑进度更新
let targetProgress = 0;
let currentDisplayProgress = 0;

function smoothUpdate() {
  // 每次只向目标值靠近一点点
  currentDisplayProgress += (targetProgress - currentDisplayProgress) * 0.1;
  
  // 如果差距很小，直接跳到目标值
  if (Math.abs(targetProgress - currentDisplayProgress) < 0.5) {
    currentDisplayProgress = targetProgress;
  }
  
  updateProgress(currentDisplayProgress);
  
  if (currentDisplayProgress < 100) {
    requestAnimationFrame(smoothUpdate);
  }
}

// 外部调用时只设置目标值
function onProgressUpdate(loaded, total) {
  targetProgress = (loaded / total) * 100;
}

4.5 我在项目中踩过的坑

最后分享几个实战教训：

• 进度条卡在99%：因为资源加载完成后还有解析、渲染等操作。解决方案是预留5%的「隐藏进度」，等所有工作完成后再跳到100%
• 进度条回退：有些资源加载失败后会重试，导致进度倒退。用户看到进度条往回走，心态直接崩了。我现在的做法是：进度只增不减，失败资源单独处理
• 移动端性能：在低端手机上，频繁更新DOM会导致卡顿。建议用transform代替width，或者用Canvas绘制进度条

嗯，进度条的原理就这些。下一章咱们聊聊3D资源加载的具体实现，到时候会用到今天写的这个进度条组件。