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

Question

我正在制作一个非常独特的进度条,在视觉上看起来就像一个装满液体的玻璃球.不幸的是,由于圆形的形状,修改高度的传统方法效果不佳(如这个小提琴https://jsfiddle.net/usuw​​vaq5/2/所示).

正如您所看到的,让div高度"向上滑动"并不是理想的视觉效果.我也试过用css玩一下clip,但是无法让它为我工作.如何用第二张图像创建玻璃"填充"的视觉效果？

Answer 1

只需添加background-position:bottom;到#inner-progress:

#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%;
}

JSFiddle演示