Progress Steps

Create a premium multi-step progress indicator. Use a horizontal layout with 4 steps on a light background. Each step has a circular number badge connected by a horizontal line. Completed steps show a filled circle with a white checkmark SVG, a green or indigo background, and a bold label. The current step shows a filled circle with the step number, a subtle pulsing ring animation, and bold label. Upcoming steps show an empty circle with gray border, gray number, and muted label. The connecting line between steps is filled with the accent color up to the current step and gray for the remainder. Add small descriptive captions below each label. Use smooth transitions when step changes, no emojis, only SVG icons.

创建一个高级多步骤进度指示器。在浅色背景上使用水平布局展示 4 个步骤。每个步骤都有一个圆形数字徽章，并通过水平线连接。已完成的步骤显示带有白色勾选 SVG 的实心圆、绿色或靛蓝色背景和粗体标签。当前步骤显示带有步数的实心圆、微妙的脉冲环动画和粗体标签。后续步骤显示灰色边框的空心圆、灰色数字和 muted 标签。步骤之间的连接线在当前步骤之前使用强调色填充，其余部分为灰色。每个标签下方添加小描述文字。步骤变化时使用平滑过渡，不使用 emoji，仅使用 SVG 图标。