如何在 html 中制作高级对我来说:) 进度条？

问题描述

<div class="progress-bar-title">
<a href="#" style="color: black">Blabla - %48</a>
</div>
<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:6px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:10px;border-radius:4px;"></div>
</div>

我正在使用此代码，但我希望在进度条中显示“Blabla - %48”文本。我怎样才能做到这一点？ like this but no loading bar,normal progress bar.

解决方法

.container{
    width: 300px;
    height: 20px;
    background-color: #a1abb3;
    border-radius: 20px;
    -moz-box-shadow: inset 0 0 10px #00000060;
    -webkit-box-shadow: inset 0 0 10px #00000060;
    box-shadow: inset 0 0 10px #00000060;
}

.progress{
    background-color: #e4c14a;
    height: 20px;
    border-radius: 20px;
    -moz-box-shadow: inset 0 0 10px #00000060;
    -webkit-box-shadow: inset 0 0 10px #00000060;
    box-shadow: inset 0 0 10px #00000060;
}

.load-text{
    color: gray;
    font-size: 10px;
    line-height: 20px;
    float: right;
    margin-right: 10px;
}

<div class="container">
    <div class="progress" style="width:48%">
        <span class="load-text">Blabla - 48%</span>
    </div>
</div>

,

改变文字的位置，调整一些属性

<div id="progressbar" style="width:250px;background-color:#00a0b0;border-radius:12px;padding:3px;">
<div style="background-color: #ffffff;width:48%;height:20px;border-radius:8px;">
<span class="progress-bar-title" style="color: black;font-size:80%"> Blabla - %48</a>
</span>

</div>
</div>

,

您可以创建两个 div。

.container{
  margin-top: 1rem;
  width: 10rem;
  background-color: #e5e5e5;
  border-radius: 0.4rem;
}

.progress{
  background-color: green;
  height: 1rem;
  padding: 0;
  border-radius: 0.4rem;
  display: flex;
  justify-content: flex-start;
}

.progress span{
    color: #fff;
    filter: brightness(2);
    font-weight: 700;

}

<div class="container">
  <div class="progress" style="width:40%">

  </div>
</div>

<div class="container">
  <div class="progress" style="width:60%">

  </div>
</div>