# 章节进度条（Chapter Progress Bar）

镜语 · 特效与转场 / 标注与数据

- 别名：分段进度条、视频进度条、章节条
- 口语：「视频底下加一条分段的进度条显示讲到第几部分」「让观众知道还剩多少」
- 一句话：底部进度条按章节分段填充，提示观众看到哪里
- 是什么：章节进度条把视频时长分成若干段，在画面底部按播放进度填充，并标出当前章节名。它让观众知道讲到哪里、还剩多少，常见于中长视频
- 缺了就不像：按章节分段；填充随时间前进；标出当前位置
- 加了更像：当前章节名高亮；角标同步；细而不抢画面
- 适合用在：知识、教程类中长视频，帮观众定位内容；口播测评中分段展示「外观 / 续航 / 价格」；直播切片、课程剪辑中的进度提示
- 看哪里：进度条不是一整条，而是按「开场 / 方法 / 案例 / 总结」分段；填到哪一段，那段的名字就变亮，左上角的章节标签同步切换
- 注意：进度条太粗、太亮会抢走画面注意力；分段比例与实际时长不符时会误导观众；与平台自带进度条重叠在同一位置
- 描述示例：在视频底部加一条细的分段进度条，按「开场、方法、案例、总结」4 段分隔，红色填充随播放从左往右前进；当前章节名称变亮，其余变暗；左上角小标签同步显示「02 方法」等当前章节
- 易混：
  - [柱状图生长](https://idea.ameng.dev/terms/bar-chart-grow.md)：柱状图比较多个类别的数值；进度条表示一条时间线上的位置
  - [呼吸脉冲](https://idea.ameng.dev/terms/loading-pulse.md)：呼吸脉冲表示等待状态，不提供进度信息
- 相关：[人名条](https://idea.ameng.dev/terms/lower-third.md)、[倒计时](https://idea.ameng.dev/terms/countdown.md)

## 来源与延伸阅读

- [GSAP · Timeline 动画编排](https://gsap.com/docs/v3/GSAP/Timeline/)
- [Material Design · 进度指示器](https://m3.material.io/components/progress-indicators/overview)

网页版（含演示）：https://idea.ameng.dev/terms/chapter-progress