动态进度条的困惑

想要实现如下效果的进度条:图片描述

进度条的背景是一个图片:图片描述

当上边的数值达到不同的峰值时,会有三个颜色的变化,(以第一个进度条为例)分别是亮绿色、棕色、后边的红色。而在这三个颜色内,进度条也会根据数值动态的变长或变短。比如,在亮绿色这个范围内,当小于一个值时,进度条就在这个亮绿色范围内变化。

在线等具体代码应该如何实现?已经百度了很久了还是没有弄出来

阅读 3.3k
2 个回答

这种进度条应该都是百分比计算吧。 高亮的部分应该是另外一个层? 判断高亮部分的宽度,

宽度 > C => 红色
宽度 < C > B => 橙色
宽度 < B > A => 绿色

这样不就完了么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题