動畫進度條文本顯示

（我的網站上的代碼將被粘貼到下面）我剛剛從互聯網上撕下了這段代碼LINK，我想知道是否有人可以幫我一點點。最後有一個很小的x％顯示百分比（x是數字）。有沒有什麼辦法可以讓它出現在進度條的中間，而不是最後，還可以更改文本的字體？一旦它滿了，x％會消失？如果有人能幫助我，我將不勝感激。動畫進度條文本顯示

function progressBar(percent, $element) { 
 
\t var progressBarWidth = percent * $element.width()/100; 
 
\t $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;"); 
 
}

#progressBar { 
 
    width: 400px; 
 
    height: 22px; 
 
    border: 1px solid #111; 
 
    background-color: #292929; 
 
} 
 

 
#progressBar div { 
 
    height: 100%; 
 
    color: #fff; 
 
    text-align: right; 
 
    line-height: 22px; 
 
    width: 0; 
 
    background-color: #CC6600; 
 
} 
 

 
.pbar { 
 
\t background: #FFF; 
 
\t border: 1px solid #AAA; 
 
\t overflow: hidden; \t \t 
 
} 
 
.pbar div { 
 
\t background-image: url(pbar.gif); 
 
\t border-right: 1px solid #AAA; 
 
}

<head> 
 
    <script type="text/javascript" src="/templates/progressbar.js"></script> 
 
</head> 
 
<div id="progressBar" class="pbar"><div></div></div> 
 
<script> 
 
\t progressBar(23, $('#progressBar')); 
 
</script>

這裏是背景

來源

2015-09-25 Lion

更改文本對齊：權利;在#progressBar div to text-align：center;並更改該元素的CSS來包含您的字體首選項 – DRGA

@DRGA謝謝，我以前實際嘗試過這個字體家族，但似乎沒有工作。我錯過了第一次對齊的文本，但這次它確實奏效（他們倆），謝謝！不知道爲什麼字體家族第一次無法正常工作，但是現在它很好用。 – Lion

您可以使用快捷方式，並使用引導進度條的GIF。

如果你想動畫它。使用width屬性

var w = 0; 
 
setInterval(function() { 
 
    w = w % 100 + 10; 
 

 
    $('#animate').width(w + '%').text(w + '%') 
 
}, 1000);

.progress-bar-purple { 
 
    background-color: purple !important; 
 
    font-size: 24px !important; 
 
    line-height: 240px !important; 
 
    font-family: "Times New Roman" 
 
} 
 
.progress.tall { 
 
    min-height: 240px; 
 
    max-width: 240px; 
 
    background-color: blue; 
 
} 
 
.progress-bar-orange { 
 
    background-color: orange !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="progress"> 
 
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div id='animate' class="progress-bar progress-bar-striped active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress"> 
 
    <div id='animate' class="progress-bar progress-bar-striped progress-bar-orange active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div> 
 
<div class="progress tall"> 
 
    <div id='animate' class="progress-bar progress-bar-striped progress-bar-purple active" style="width:40%"> 
 
    40% 
 
    </div> 
 
</div>

來源

2015-09-25 12:01:26 Neoaptt

這看起來不錯，但我如何使用我自己的css來定製它們？寬度，高度，背景顏色，欄顏色，字體，字體顏色等？ – Lion

編輯自定義欄的答案 – Neoaptt

動畫進度條文本顯示

回答

相關問題