進度條百分比與條動態一起移動嗎？

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

可能有更好的方法來做到這一點。但是，在你解決你的問題之前，沒有什麼比這更好的幫助了。