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

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

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