How to make advanced (for me :) progress bar in html?

Question

<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>

I am using this code but I want this "Blabla - %48" text in the progress bar. How can I do this? like this but no loading bar, normal progress bar.

score 0 · Answer 1 · answered Feb 05 '21 at 16:47

.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>

score 0 · Answer 2 · answered Feb 05 '21 at 17:24

Just change the location of the text, and adjust some attributes

<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>

score -1 · Answer 3 · answered Feb 05 '21 at 16:35

You can create two div's.

.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>

How to make advanced (for me :) progress bar in html?

3 Answers3