javascript - 如何根据值创建上升到一定高度的动画栏

Question

嗨，我需要创建一个桶装满值的动画，并且需要知道如何最好地做到这一点，以便客户端可以自己更新值，动画将自动知道在哪里停止填充桶。最后，一旦达到最高值，就会出现某种动画，表示祝贺。

例如。桶数从下到上分别为 0,10k,30k,50k,70k,80k，最后是 100k

我只需要一种简单的方法来使用 html、javascript/jquery 甚至 xml 来做到这一点，这样他们就可以每天自己更新值

感谢任何帮助将不胜感激

Answer 1

您可以使用进度 html5 元素。

如果您希望它是垂直的，我认为只有 Mozilla prodive 一个-moz-orient属性。

但是你可以使用旋转它transform: rotate(-90deg);