How to create a progressbar with inverted text color for "progressed" part

css, html

Solution

This can be implemented by using `clip-path: inset()`:

.progress {
  position: relative;
  display: flex;
  height: 100px;
  border: 3px solid #566573;
  border-radius: 8px;
  font-size: 50px;
  font-family: Courier, monospace;
  overflow: hidden;
}

.back {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #5D6D7E;
  color: white;
}

.front {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: white;
  color: black;
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path: inset(0 0 0 50%);
  transition: clip-path 1s linear;
}

<div class="progress">
  <div class="back">progress 100%</div>
  <div class="front">progress 100%</div>
</div>

Problem

I'm trying it since hours, but I'm not getting any solution that works. The task is: create a progressbar with dynamic width and a centered label, that changes its text color between progressed and unprogressed part. Here is an image for clarification: So this works great, if i know the width of the whole progressbar. But it's not usable in a responsive design, where it's width is calculated automatically. Here is my code: ``` <div class="progress" style="width: 400px;"> <div class="progressValue" style="width: 50%"> <div class="progressInnerLabel" style="width: 400px;">I'm a progress text</div> </div> <div class="progressLabel">I'm a progress text</div> </div> ``` And my CSS: ``` .progress { position: relative; } .progressValue { overflow: hidden; position: absolute; height: 20px; background-color: blue; } .progressInnerLabel { position: absolute; text-align: center; color: white; height: 20px; } .progressLabel { background-color: #eee; text-align: center; color: black; } ``` I've also created a fiddle, so you can play around with it: http://jsfiddle.net/Q82kF/2/ I would like to remove the width: 400px of my first div (class = progress) of my html, so the progress automatically gets the full available width. Does anybody have a solution for this? I DON'T wand to do it with javascript (or any lib). I think there must be a CSS/HTML only solution.

Original source

Related problems