进度条百分比动态地随着条移动？

Question

我正在寻找可以在进度条动画中使用的效果，我不知道在哪里搜索它 - 基本的想法是你有一个进度条，我想做的是显示在装载＆＃34;核心＆＃34;正上方加载的百分比酒吧因此，不是在左侧，不是在右侧，而是在上方和动态，跟随并随着栏的装载彩色核心一起移动。详细效果：数字正在计数以及它们沿着线移动（与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;
}

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