← 返回导航

进度条效果

animations
基础进度条（75%）
条纹动画进度条
不确定进度（来回滑动）
75%
圆形进度条

关键点

  • 进度条由轨道和填充条两部分组成，填充条宽度变化表示进度百分比
  • 条纹效果使用 repeating-linear-gradient 创建斜向条纹背景
  • 条纹流动通过 background-position 的持续横向移动实现动感
  • 进度增长用 width 或 transform: scaleX() 过渡，从 0% 到目标值
  • indeterminate 不确定状态下可用条纹流动 + 左右来回移动表示"加载中"

效果说明

进度条动画效果，包含 determinate（确定进度）和 indeterminate（不确定进度）两种类型。利用 CSS 宽度动画、条纹背景位移、SVG stroke-dashoffset 等技术实现。这里展示 4 种变体：基础进度条、条纹动画、不确定进度、圆形进度条。