# Stepper: 进度步骤界面

包含 Account、Plan 和 Done 三步的横向进度指示器，显示在第二步。 视频模板，可复制代码供 Claude 使用，或在 Subclip 中编辑。

Canonical URL: https://www.subclip.app/zh/motion-graphics-templates/remotion/stepper

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-stepper.mp4?v=acda60c86a

带三个带标签步骤的横向引导步骤条，可设置当前步骤来展示进度。

- 框架: Remotion
- 类别: 界面
- 时长: 5 秒
- 纵横比: 16:9 横屏
- 代码: 获取代码（免费登录）：https://www.subclip.app/zh/motion-graphics-templates/remotion/stepper

横向步骤条显示由一条线连接的三个步骤 Account、Plan 和 Done，第二步 Plan 处于当前状态。模板会把这个状态保持四秒。在代码中，进度跟随连续的步骤位置变化，流程推进时连线逐渐填满，每个步骤依次亮起。

您可以设置当前步骤，还可以调整播放速度和背景。适用于新手引导、结账或注册演示、"三步搞定"式讲解视频或设计系统展示。

## 适用场景

- 新手引导
- 结账与注册演示
- 三步讲解视频
- 设计系统展示

## 可修改的内容

- `speed`: 播放速度 (数字)
- `stageBackground`: 场景周围的背景 (颜色)

## 如何使用此模板

1. 下载 Mac 或 Windows 的 Subclip。此页面上的每个模板均已预先安装。
2. 打开"模板"面板，选择 Stepper 并将其放在时间线上。
3. 更改图层设置中的文本、颜色和时间，或要求 AI 代理为您编辑。
4. 导出视频，或下载代码以在您自己的项目中使用该模板。

基于 remocn 的 Stepper 制作: https://remocn.dev