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

要使用计数器创建正确的进度条，您需要使用HTML5 Progress tag

本教程将介绍如何执行此操作：https://css-tricks.com/html5-progress-element/

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

Answer 2

我试图让它尽可能简单。只需添加更多的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

带计数器的动画进度条

2 个答案: