前端 不规则进度条，求好的思路？

问题：

• 制作一个不规则的进度条，其外观是一个水塔，水面随进度动态调整高度。
• 进度低于 20% 时显示为红色，其余进度显示为绿色。
• 整体尺寸应自适应父布局。

思路：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 使用 SVG 图片作为进度条，利用 clip-path 进行裁切显示水面上升效果。
• 根据进度值动态修改 clip-path 的高度，即可实现水面高度动态变化。
• 使用 CSS 设置进度条颜色，满足低于 20% 红色，其余进度绿色的要求。
• 为了自适应父布局，使用 vw 和 vh 单位进行尺寸设置。

代码示例：

<svg class="progress-bar" width="100vw" height="100vh" viewbox="0 0 120 120"><defs><mask id="water-mask"><rect width="100%" height="100%" fill="white"></rect></mask></defs><path id="water" mask="url(#water-mask)" d="M50 100...[水塔轮廓路径]" fill="blue"></path></svg>

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#water {
  clip-path: inset(calc(100% - 20px) 0 0 0);
  transition: clip-path 0.5s ease-in-out;
}

.progress-bar--low #water {
  fill: red;
}

注意：

• 要实现水塔轮廓，需要使用 SVG 编辑器绘制。
• clip-path 的值根据水塔轮廓和 desired 进度值进行调整。
• 可以通过 JavaScript 动态获取和设置进度值，控制水面高度和颜色变化。