如何創建一個可以在進度條中隨填充進度div一起移動的div？

-1

我有一個進度條，其進度是從out數據庫中計算出來的。從本質上講，它知道打印作業已經走了多遠，並以百分比形式顯示（即10/20頁打印爲50％）如何創建一個可以在進度條中隨填充進度div一起移動的div？

我想要一個div跟隨加載的進度條，顯示的顏色部分印刷任務已經走了多遠。像這樣的東西。

但是我有困難使得標籤DIV線正確進度條，特別是當我改變屏幕尺寸。這是我如何計算利潤和當前的位置：

HTML

<div class="col s4 m4 l5" style="position: relative"> 
    <div class="left-align">PRINTING</div> 
    <div id="talkbubble" style="z-index: 1; position: absolute; top: 0px; margin-left: {{getTabMargin}}%">hello</div> 
    <div class="progress progress-dashboard-full statusBars"> 
      <div class="determinate progress-dashboard-loaded" style="width: {{getprogressWidth}}%"></div> 
    </div> 
</div>

getprogressWidth: function() { 
    return ((progressWidth/100)*100); 
}, 
getTabMargin: function() { 
    return (((progressWidth/100)*100)-8); 
},

這只是編寫JavaScript功能Blaze公司的方式，但原理是一樣的。基本上我得到的是進度條的寬度（getprogressWidth），然後減去8％來補償div選項卡的寬度。但是這不起作用，特別是當屏幕被調整大小時。

任何人都可以推薦更好的解決方案嗎？

來源

2017-03-16 RP12

請創建一個小提琴 –

你需要提供一些更多的代碼，您所提供的微小片段不允許我們重新創建您的情況，我們」重新缺少CSS，以及大部分的JavaScript。請閱讀「* [mcve] *」和「* [ask] *」指導方針，希望他們能夠提供足夠的指導，讓您可以將問題改善到不會被關閉的程度。 –

我會做到這一點使用純CSS：

<div class="col s4 m4 l5" style="position: relative"> 
    <div class="left-align">PRINTING</div> 
    <div class="progress progress-dashboard-full statusBars"> 
      <div class="determinate progress-dashboard-loaded" style="position:relative;width:50%"> 
      <div id="talkbubble" style="position: absolute; top: 0; right: -18px;">hello</div> 
      </div> 
    </div> 
</div>

來源

2017-03-16 20:16:57

如何創建一個可以在進度條中隨填充進度div一起移動的div？

回答

相關問題