與反

Question

動畫進度條

請，任何人都可以幫我在下面

Animated progress bar with counter on the right

我已經在谷歌搜索創建計數器動畫進度條，如圖像，我仍然無法解決這個問題。我的代碼是：

<div class="container5"> 
    <h1 class="header5">Skill Kami</h1> 
    <hr width="150px" color="#2EA2DB" style="position: relative; top: 160px; left: 95px;"> 
    <p style="color: white; position: absolute; top: 180px; left: 100px; margin-right: 700px;">Tim Jasa Pembuatan Blog Anas terdiri dari 4 ahli professional yang sudah sangat berpengalaman dalam bidang mereka masing-masing. Ketika 4 professional tersebut bersatu maka akan tercipta sebuah pernyataan yang bisa menyimpulkan skill yang dimiliki oleh Jasa Pembuatan Blog Anas. Dan disebelah kanan adalah skill yang kami miliki hingga saat ini dan akan terus berkembang.</p> 
    <div class="progress"> 
     <div class="progress-container"> 
      <div class="progress-bar tip" title="98%"></div> 
     </div> 
     <div class="progress-container"> 
      <div class="progress-bar tip" title="58%"></div> 
     </div> 
     <div class="progress-container"> 
      <div class="progress-bar tip" title="28%"></div> 
     </div> 
    </div> 
</div> 

而且下面是我的CSS：

.container5 { 
    width: 100%; 
    height: 450px; 
    position: relative; 
    top: -1400px; 
    margin-top: 30px; 
    background-image: url('1.png'); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
} 
.header5 { 
    color: #fff; 
    position: absolute; 
    top: 80px; 
    left: 100px; 
    text-align: center; 
    padding-top: 40px; 
} 
.progress { 
    position: absolute; 
    top: 180px; 
    left: 800px; 
} 
.progress-container { 
    height: 25px; 
    overflow: hidden; 
    background: red; 
    width: 460px; 
    margin-bottom: 30px; 
} 
.progress-bar { 
    height: 25px; 
    width: 0px; 
    text-align: right; 
    line-height: 25px; 
    background: white; 
} 

Answer 1

我在儘量簡化它。只需添加更多的CSS。

<div class="progress-bar"> 
    <div><span>95%</span></div> 
</div> 

.progress-bar { 
    height: 20px; 
    background: #ccc; 
    width: 250px; 
} 

.progress-bar div { 
     height: 20px; 
    background: blue; 
    width: 95%; 
} 

.progress-bar div span { 
    float: right; 
    color: #fff; 
} 

https://jsfiddle.net/vandolphreyes29/dtss25av/4/

此外，我會建議使用這個框架。 https://semantic-ui.com/modules/progress.html

Answer 2

要創建計數器適當的進度條，你需要使用HTML5 Progress tag

本教程上的CSS-技巧將教你如何做到這一點：https://css-tricks.com/html5-progress-element/

<!-- basic html for progress bar --> 
<progress max="100" value="0"></progress> 

Answer 3

有一個有用的插件對於動畫技巧吧查看 Designify animated skills bar。