进度条实现原理

约 3135 字大约 10 分钟

2026-04-18

在日常开发与产品交互中，进度条是再常见不过的基础组件，无论是文件上传、资源加载还是任务进度展示，都离不开它的身影。直观上看，进度条只是一段随数值变化的动态条，实现起来似乎并不复杂，借助 AI 工具也能快速得到可用代码片段。

但真正从零手写实现，尤其是在包含图片动效、流畅动画过渡与精准进度同步的场景下，就会发现其中涉及的布局逻辑、动画原理与状态控制远比表象更值得深究。本文将抛开直接复制代码的便捷方式，深入解析进度条的核心实现原理，从基础原理到动效细节，一步步揭开它的运行机制。

点我查看代码

HTML 部分

<div class="container">
        <div class="progress">
            <div class="bar shadow floor"></div>
        </div>
    </div>

CSS 部分

.container {
    text-align: center;
}

.progress {
    display: inline-block;
    width: 400px;
    height: 50px;
    margin: 35px;
    border-radius: 20px;
    background: #f9f9f9;
}

.bar {
    border-radius: 20px;
    width: 0%;
    height: 100%;
    transition: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.36,.55,.63,.48);
}
.shadow {
    /* 25 50 */
    box-shadow: 0px 45px 50px rgba(0, 0, 0, 0.25); 
}

.floor {
    background-color: #00b9f2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 80 80'%3E%3Cg fill='%2392278f' fill-opacity='0.71'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
}

JS部分

const bars = document.querySelectorAll('.bar');
const progress = document.querySelectorAll('.progress');

bars.forEach((bar, index) => {
  const randomWidth = Math.floor((Math.random() * 65) + 10);
  bar.style.width = `${randomWidth}%`;

  progress[index].addEventListener('mouseover', () => {
    const randomTiming = Math.floor((Math.random() * 2) + 2);
    console.log(randomTiming);
    bar.style.transitionDuration = `${randomTiming}s`;
    bar.style.width = '100%';
  });
})

:::

实现原理

HTML 层

外层.container仅用于居中对齐，是布局容器；
中间.progress是进度条的 “外框”，定义进度条的整体尺寸、背景和圆角；
内层.bar是实际的 “进度条本体”，宽度由 JS 动态控制，承载背景纹理和过渡动画。

CSS层

过度动画核心: .bar设置transition: width（仅监听 width 属性变化），指定transition-duration: 1s（默认动画时长）和自定义贝塞尔曲线cubic-bezier(.36,.55,.63,.48)（控制动画节奏，非匀速）；

JS层

通过随机时长，触发bar的宽度到 100%的随机动画

广度研究

不只局限于单一实现方式，而是从更多维度去梳理、对比、归纳同类方案与扩展思路

考察问题	考察点	延伸追问
1. 为什么.progress用inline-block而非block？如果用block怎么实现居中？	盒模型、居中布局	除了margin: 0 auto，还有哪些垂直 / 水平居中的方案？（flex/grid/ 定位）
2. transition: width和transition: all的区别？这里为什么只写 width？	CSS 过渡原理、性能	哪些 CSS 属性修改会触发重排（reflow）？哪些只会触发重绘（repaint）？width 属于哪类？
3. querySelectorAll和getElementsByClassName的核心差异？	DOM 选择器、静态 / 动态集合	如果动态新增一个.progress 元素，现有 JS 能捕获到吗？怎么改造？

这是表格标题

问题 1：为什么.progress用inline-block而非block？如果用block怎么实现居中？

使用inline-block的核心原因：

block元素默认会独占一行，宽度撑满父容器（.container），即使手动设置width: 400px，父容器的text-align: center也无法作用于 block 元素（text-align仅对行内 / 行内块元素生效）；
inline-block兼具行内元素（可被text-align: center居中）和块元素（可设置宽高）的特性，既能让.progress被父容器的text-align: center水平居中，又能保留width: 400px、height: 50px的自定义尺寸。

若用block实现居中： 给.progress显式设置宽度（如width: 400px），然后添加margin: 0 auto（水平居中核心），示例：

.progress {
  display: block;
  width: 400px;
  height: 50px;
  margin: 35px auto; /* 上下35px，左右auto实现水平居中 */
  border-radius: 20px;
  background: #f9f9f9;
}

问题 2：transition: width和transition: all的区别？这里为什么只写 width？

核心区别：

transition: width：仅监听元素的width属性变化，只有width修改时才触发过渡动画，是精准监听；
transition: all：监听元素所有可过渡的 CSS 属性（如 width、background-color、margin 等），任意属性变化都会触发过渡动画，是全局监听。 只写width的原因：
性能优化：减少浏览器的监听开销，避免无关属性（如box-shadow、color）变化时触发不必要的动画，降低重排 / 重绘频率；
逻辑精准：业务需求仅需宽度变化的动画，全局监听易导致意外动画（比如修改背景色时也触发过渡，不符合预期）。

问题 3：querySelectorAll和getElementsByClassName的核心差异？

特性	querySelectorAll	getElementsByClassName
返回值类型	静态NodeList（DOM 快照）	动态HTMLCollection（实时 DOM 集合）
语法支持	支持任意 CSS 选择器（如.progress .bar）	仅支持类名（如progress）
DOM 变化响应	集合不会随 DOM 新增 / 删除自动更新	集合实时反映 DOM 变化

延伸追问解答（动态新增.progress 的处理）

现有 JS 无法捕获： 因为querySelectorAll返回静态NodeList，动态新增的.progress不会被加入原有集合，遍历逻辑仅执行一次，无法覆盖新元素；
改造方案（按优先级排序）：

方案 1：事件委托：将mouseover事件绑定到父容器（如.container），通过事件冒泡捕获新元素的交互：
方案 2：使用动态集合：改用document.getElementsByClassName('progress')，遍历前重新获取集合；
方案 3：监听 DOM 变化：用MutationObserver检测新增的.progress，自动绑定事件。

深度探索

如果页面有 100 个进度条，当前代码会出现哪些性能问题？怎么优化？

考点：DOM 查询、事件绑定、重排重绘；
优化方向：事件委托、批量 DOM 操作、requestAnimationFrame、减少过渡触发频率

问题分析

事件绑定：给 100 个元素各绑定一个监听器，占用内存。影响高
DOM 查询/遍历：频繁读取 DOM 节点。其实还好
重拍：100 个元素的width(重排属性)被动态修改。页面卡顿
动画触发频率：若快速划过 100 个进度条。mouseover 高频触发。掉帧、重排

分析方案

事件委托。100 个监听器合并为 1 各，绑定到父容器
批量操作 DOM + requestAnimationframe 减少重排
缓存 DOM 结果，减少重复查询次数
用 transform 替代width（仅触发合成层动画，无重排）

当前随机值（初始宽度 10-75%、过渡时长 2-4s）是硬编码的，如何封装成可配置的组件？

（考点：代码封装；参考方案：抽离配置对象const config = { minWidth: 10, maxWidth: 75, minDuration: 2, maxDuration: 4 }）
抽离对象+初始化函数。
class类组件，高扩展性
可维护性：修改范围只需改配置，无需改业务逻辑；
复用性：可实例化多个组件，适配不同区域的进度条；
扩展性：新增配置（如颜色、圆角）只需在配置对象加字段，无需重构核心逻辑。

点我查看代码

class ProgressBarComponent {
  // 构造函数接收配置，默认值兜底
  constructor(options = {}) {
    this.config = {
      minWidth: 10,
      maxWidth: 75,
      minDuration: 2,
      maxDuration: 4,
      defaultTransitionTiming: 'cubic-bezier(.36,.55,.63,.48)',
      fullWidth: '100%',
      containerSelector: '.container',
      progressSelector: '.progress',
      barSelector: '.bar',
      ...options // 自定义配置覆盖默认
    };
    this.initialWidths = []; // 存储每个进度条初始宽度
    this.container = document.querySelector(this.config.containerSelector);
    this.init(); // 初始化
  }

  // 初始化进度条
  init() {
    this.setInitialWidth();
    this.bindEvents();
  }

  // 设置初始宽度
  setInitialWidth() {
    const bars = document.querySelectorAll(this.config.barSelector);
    this.initialWidths = []; // 重置初始宽度
    bars.forEach((bar) => {
      const randomWidth = Math.floor(
        Math.random() * (this.config.maxWidth - this.config.minWidth) + this.config.minWidth
      );
      bar.style.width = `${randomWidth}%`;
      bar.style.transition = `width 1s ${this.config.defaultTransitionTiming}`;
      this.initialWidths.push(randomWidth);
    });
  }

  // 绑定事件（委托）
  bindEvents() {
    if (!this.container) return;
    // 移除旧事件避免重复绑定
    this.container.removeEventListener('mouseover', this.handleMouseOver);
    this.container.addEventListener('mouseover', this.handleMouseOver.bind(this));
  }

  // 处理hover逻辑
  handleMouseOver(e) {
    const targetProgress = e.target.closest(this.config.progressSelector);
    if (!targetProgress) return;
    const bar = targetProgress.querySelector(this.config.barSelector);
    const randomDuration = Math.floor(
      Math.random() * (this.config.maxDuration - this.config.minDuration) + this.config.minDuration
    );
    bar.style.transitionDuration = `${randomDuration}s`;
    bar.style.width = this.config.fullWidth;
  }

  // 扩展方法：动态新增进度条
  addProgressBar() {
    const progress = document.createElement('div');
    progress.className = this.config.progressSelector.slice(1); // 去掉.
    const bar = document.createElement('div');
    bar.className = `${this.config.barSelector.slice(1)} shadow floor`;
    progress.appendChild(bar);
    this.container.appendChild(progress);
    this.setInitialWidth(); // 重新初始化宽度
  }
}

// 实例化组件（可自定义配置）
const progressInstance = new ProgressBarComponent({
  minWidth: 15,
  maxWidth: 80,
  minDuration: 1,
  maxDuration: 3
});

// 动态新增进度条示例
// progressInstance.addProgressBar();

问题：要求鼠标移出后进度条回退到初始宽度，怎么实现？需要注意什么？

考点：事件解绑、动画队列；
注意点：保存初始宽度、避免多次触发动画导致的卡顿、移出时恢复原过渡时长

方案分析

保存初始宽度：通过dataset.index标记每个 bar 的索引，匹配缓存的 initialWidths，避免回退宽度错误；
避免动画队列卡顿：用setTimeout防抖（50ms），清除未执行的动画指令，防止快速移入 / 移出导致多个动画排队执行；
恢复默认过渡时长：hover 时修改了transitionDuration，移出时必须改回默认值（1s），否则回退动画时长随机，体验不一致；
事件解绑：组件销毁时移除所有事件监听，清除定时器，避免内存泄漏；
动画完整性：不要在动画过程中强制修改宽度（如用transitionend事件确保动画完成后再操作，可选）。

问题：要给进度条添加实时百分比显示（动画过程中数值跟着变），怎么实现？

考点：动画帧监听；方案：用requestAnimationFrame监听 width 变化，实时更新数值 DOM

核心思路
- 新增 DOM 元素用于显示百分比；
- 用requestAnimationFrame监听进度条宽度 /transform 的变化（浏览器每一帧触发，精准同步动画）；
- 实时计算当前进度的百分比，更新 DOM 文本。
requestAnimationFrame 的优势：
- 与浏览器刷新频率同步（通常 60 帧 / 秒），避免卡顿，比setInterval更精准；
- 后台标签页会暂停执行，节省性能；
getComputedStyle 的作用：获取元素的实际计算样式（而非内联样式），能拿到动画过程中的实时 width/transform 值；
性能优化：仅当百分比值变化时才更新 DOM 文本，避免每一帧都修改 DOM 导致的性能损耗；
兼容 transform：scaleX比width性能更优（仅触发合成层动画，无重排），需解析matrix矩阵值获取缩放比例。

点我查看代码

class ProgressBarComponent {
  constructor(options = {}) {
    this.config = {
      minWidth: 10,
      maxWidth: 75,
      minDuration: 2,
      maxDuration: 4,
      defaultTransitionTiming: 'cubic-bezier(.36,.55,.63,.48)',
      defaultTransitionDuration: '1s',
      fullWidth: '100%',
      containerSelector: '.container',
      progressSelector: '.progress',
      barSelector: '.bar',
      textSelector: '.progress-text',
      useTransform: false, // 可选：是否用transform替代width
      ...options
    };
    this.initialWidths = [];
    this.container = document.querySelector(this.config.containerSelector);
    this.rafTimer = null; // 保存requestAnimationFrame的ID
    this.init();
  }

  init() {
    this.setInitialWidth();
    this.bindEvents();
    this.startProgressListener(); // 启动实时监听
  }

  setInitialWidth() {
    const bars = document.querySelectorAll(this.config.barSelector);
    const texts = document.querySelectorAll(this.config.textSelector);
    this.initialWidths = [];
    bars.forEach((bar, index) => {
      const randomWidth = Math.floor(
        Math.random() * (this.config.maxWidth - this.config.minWidth) + this.config.minWidth
      );
      this.initialWidths.push(randomWidth);
      bar.dataset.index = index;
      // 兼容width/transform两种方式
      if (this.config.useTransform) {
        bar.style.width = '100%';
        bar.style.transform = `scaleX(${randomWidth / 100})`;
        bar.style.transformOrigin = 'left center';
        bar.style.transition = `transform ${this.config.defaultTransitionDuration} ${this.config.defaultTransitionTiming}`;
      } else {
        bar.style.width = `${randomWidth}%`;
        bar.style.transition = `width ${this.config.defaultTransitionDuration} ${this.config.defaultTransitionTiming}`;
      }
      // 初始化文字
      texts[index].textContent = `${randomWidth}%`;
    });
  }

  // 核心：实时监听进度变化（requestAnimationFrame）
  startProgressListener() {
    // 先取消旧的监听，避免重复
    if (this.rafTimer) cancelAnimationFrame(this.rafTimer);

    const updateProgressText = () => {
      const bars = document.querySelectorAll(this.config.barSelector);
      const texts = document.querySelectorAll(this.config.textSelector);

      bars.forEach((bar, index) => {
        let currentPercent = 0;
        // 方式1：监听width（传统）
        if (!this.config.useTransform) {
          const computedStyle = getComputedStyle(bar);
          const width = computedStyle.width;
          const parentWidth = getComputedStyle(bar.parentElement).width;
          // 计算百分比（四舍五入）
          currentPercent = Math.round((parseFloat(width) / parseFloat(parentWidth)) * 100);
        } 
        // 方式2：监听transform（性能更优）
        else {
          const computedStyle = getComputedStyle(bar);
          const transform = computedStyle.transform;
          // 解析scaleX的值（matrix(scaleX, 0, 0, scaleY, 0, 0)）
          const scaleX = transform === 'none' ? 0 : parseFloat(transform.split(',')[0].replace('matrix(', ''));
          currentPercent = Math.round(scaleX * 100);
        }
        // 更新文字（避免频繁修改DOM，仅当值变化时更新）
        if (texts[index].textContent !== `${currentPercent}%`) {
          texts[index].textContent = `${currentPercent}%`;
        }
      });

      // 持续监听（浏览器每一帧执行一次）
      this.rafTimer = requestAnimationFrame(updateProgressText);
    };

    // 启动监听
    this.rafTimer = requestAnimationFrame(updateProgressText);
  }

  handleMouseOver(e) {
    const targetProgress = e.target.closest(this.config.progressSelector);
    if (!targetProgress) return;
    const bar = targetProgress.querySelector(this.config.barSelector);
    clearTimeout(this.hoverTimer);
    this.hoverTimer = setTimeout(() => {
      const randomDuration = Math.floor(
        Math.random() * (this.config.maxDuration - this.config.minDuration) + this.config.minDuration
      );
      bar.style.transitionDuration = `${randomDuration}s`;
      // 兼容width/transform
      if (this.config.useTransform) {
        bar.style.transform = 'scaleX(1)';
      } else {
        bar.style.width = this.config.fullWidth;
      }
    }, 50);
  }

  handleMouseOut(e) {
    const targetProgress = e.target.closest(this.config.progressSelector);
    if (!targetProgress) return;
    const bar = targetProgress.querySelector(this.config.barSelector);
    const index = bar.dataset.index;
    clearTimeout(this.outTimer);
    this.outTimer = setTimeout(() => {
      bar.style.transitionDuration = this.config.defaultTransitionDuration;
      // 兼容width/transform
      if (this.config.useTransform) {
        bar.style.transform = `scaleX(${this.initialWidths[index] / 100})`;
      } else {
        bar.style.width = `${this.initialWidths[index]}%`;
      }
    }, 50);
  }

  bindEvents() {
    if (!this.container) return;
    this.container.removeEventListener('mouseover', this.handleMouseOver);
    this.container.removeEventListener('mouseout', this.handleMouseOut);
    this.container.addEventListener('mouseover', this.handleMouseOver.bind(this));
    this.container.addEventListener('mouseout', this.handleMouseOut.bind(this));
  }

  // 销毁时取消动画帧监听
  destroy() {
    cancelAnimationFrame(this.rafTimer);
    this.container.removeEventListener('mouseover', this.handleMouseOver);
    this.container.removeEventListener('mouseout', this.handleMouseOut);
    clearTimeout(this.hoverTimer);
    clearTimeout(this.outTimer);
  }
}

// 实例化（可选开启transform模式）
const progressInstance = new ProgressBarComponent({
  useTransform: true // 开启后性能更优，无重排
});