How to add different text color to progressbar active and inactive area?

Question

I am adding the code with executable result below, What I need is white color to the text that appear throughout the progressbar active section. ie till €1,000,7 the color should be white and remaining whatever outside the active section should be blue ,710 paid

Also note that the progressbar will move dynamically to the right, so the colouring should vary accordingly, I am ok if someone edit the existing html also would be fine for me

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
  body{
    width:600px;
}
.progress-bar-wrap {
    position: relative;
    margin-bottom: 10px;
}

.progress-bar {
    background: #fff;
    width: 100%;
    height: 40px;
    border: 1px solid #377db7;
    border-radius: 25px;
    text-align: left;
}

.containerd {
    width: 100%;
    overflow: hidden;
    display: inline-block;
}

span#load-amount {
    position: absolute;
    top: 4px;
    color: #377db7 !important;
    font-family: Comfortaa;
    font-size: 23px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: left;
    display: inline-block;
    margin-top: 0;
}

span#load-target {
    position: absolute;
    top: 4px;
    color: #377db7 !important;
    margin-top: 0;
    right: 13px;
    font-family: Comfortaa;
    font-size: 23px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: left;
    display: inline-block;
}

.progress-bar span {
    background: #4c9fe3;
    width: 60%;
    height: 100%;
    display: inline-block;
    border-radius: 20px;
}
</style>
<script src=""></script>
<body>
  <div class="progress-bar-wrap" id="progress-barwrap" style="">
      <div class="progress-bar">
          <span id="load-percent" style="width:10% !important;" class="load-progress"></span>
      </div>
      <div class="containerd">
          <span class="amount" id="load-amount">€1,000,710 paid</span>
          <span class="target" id="load-target">target €1,000,000</span>
      </div>
  </div>

</body>
</html>

Does this answer your question? [How to create a progressbar with inverted text color for "progressed" part](https://stackoverflow.com/questions/21909494/how-to-create-a-progressbar-with-inverted-text-color-for-progressed-part) — tacoshy, Aug 18 '23 at 12:48

How to add different text color to progressbar active and inactive area?

0 Answers0