请,有人可以帮我创建带有计数器的动画进度栏,如下图所示
Animated progress bar with counter on the right
我已经在Google中搜索过,但仍然无法解决。我的代码是:
<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;
}
最佳答案
我正在尝试使其尽可能简单。只需添加更多的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
关于html - 带计数器的动画进度栏,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43828576/