Javascript 如何设置圆形垂直加载进度条的样式？

我正在制作一个非常独特的进度条，它看起来像一个装满液体的玻璃球。不幸的是，由于圆形的形状，传统的修改高度的方法不能很好地工作（如这把小提琴所示）

---

正如您所看到的，让div高度“向上滑动”并不是理想的视觉效果。我也尝试过使用css

clip

，但无法让它为我工作。如何创建玻璃“填充”第二幅图像的视觉效果？

只需添加

背景位置：底部至
#内部进度
：

#inner-progress {
  background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
  background-color: transparent;
  background-position:bottom;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  height: 0%;
}

雅各布·格雷可能有最好的答案，但这里有一个替代方案：


这种方法对动画使用css，而不是javascript。JS在这里只用于触发动画，其余的是css

这将使用css
transition
属性在高度从100%更改为0%时“设置动画”。html中唯一值得注意的变化是我将
内部
的背景替换为
外部

也许这个答案对于这个线程的未来读者来说是一个更好的解决方案——这取决于他们的实现和/或偏好


$（文档）.ready（函数（）{
$（“#内部进度”）.addClass（“加载”）；
});
#外部进程{
背景图片：url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
背景色：透明；
边界：0；
高度：100px；
宽度：100px；
位置：相对位置；
}
#内在进步{
背景图片：url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
背景色：透明；
宽度：100%；
溢出：隐藏；
位置：相对位置；
底部：0；
身高：100%；
过渡：高度3s；
-webkit过渡：高度3s；
}
.进度价值{
颜色：#FFF！重要；
字体大小：粗体；
位置：绝对位置；
最高：40%；
左：40%；
}
.装载{
高度：0%！重要；
}

0%
简单问题的简单解决方案！非常感谢。没问题。我很高兴能帮上忙。