← 返回导航

条形加载

loaders
经典波形
圆润粉色
渐变对称
方块伸缩

关键点

  • 条形加载由多根竖条组成,通过 heightscaleY 的变化模拟音量跳动
  • 每根竖条设置不同的 animation-delay,形成波浪式的高低起伏效果
  • 使用 transform: scaleY() 比直接改变 height 性能更好,因为触发 GPU 合成
  • transform-origin: bottom 让缩放从底部开始,模拟竖条从地面升起的效果
  • 缓动函数用 ease-in-out 让高度变化更平滑,避免生硬的跳变

效果说明

5 根竖条高度波动的加载动画,类似音频均衡器的视觉效果。通过 animation-delay 让每根条的波峰错开,形成连续的波浪感。这里展示 4 种变体:经典波形、圆润粉色、渐变对称、方块伸缩。