进度条百分比与条动态一起移动吗？

Question

我正在寻找可用于进度条动画的效果，我不知道在哪里寻找它 - 基本想法是，您有一个进度条，我想要做的是显示百分比即装载在条的加载“核心”上方。所以不是在左边，不是在右边，而是在上面和动态，跟随和移动与酒吧的被装载的色核心。详细的效果：数字正在向上计数，以及它们沿着线条移动（例如countUp.js效果），并且加载核心+数字速度在达到指定的百分比限制时减慢。

不知道我是否明确自己，而且我很确定我一定在某个地方见过这个地方。任何想法也许？

Answer 1

这个问题肯定可以用一些整理。这可能有助于解答。

http://jsfiddle.net/grhgnz61/2/

需要注意的是，数字容器放置在吧台里面并取得绝对位置，使其始终位于最右边的进度条。

.progressBar { 
    position: relative; 
    width: 0px; 
    height: 100%; 
    background: steelblue; 
    transition: width 0.2s ease; 
} 

.progressNumber { 
    position: absolute; 
    right: 0px; 
    top: -1em; 
    color: #eee; 
} 

可能有更好的方法来做到这一点。但是，在你解决你的问题之前，没有什么比这更好的帮助了。