How to complete such a progress bar?

Question

Layout

How to complete such a progress bar? https://monosnap.com/file/KWhkOQaqmGVGrrbvme9QT2TI...
The bar itself inside the gray wrapper should be made in one element so that I can control the width later with js.
Maybe there are some new properties that I throw a background on the back element?

Answer 1

I don't know about the new ones, but there is the good old linear-gradient()

Answer 2

If you don’t drown too much for the idiomatic solution, then you can do it like this:

<style>
  .progress {
    position: relative;
    width: 400px;
    height: 20px;
    border-radius: 10px;
    background: #d8d8d8;
  }

  .progress-bar {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #0dac12;
    border-radius: 10px;
  }

  .progress-bar__inner {
    position: absolute;
    width: 200px;
    height: 100%;
    background: #f76844;
    border-right: 2px solid #d8d8d8;
  }
</style>

<div class="progress">
      <!-- Ширина .progress-bar зависит от процента выполнения -->
      <div class="progress-bar" style="width: 247px;">
        <!-- 1/2 ширины .progress -->
        <div class="progress-bar__inner" style="width: 200px;"></div>
      </div>
    </div>

Another option is to use a gradient, as noted above.

.progress-bar {
  background: rgb(247,104,68);
  background: linear-gradient(90deg, rgba(247,104,68,1) 0%, rgba(247,104,68,1) 200px, rgba(255,255,255,1) 200px, rgba(255,255,255,1) 201px, rgba(13,172,18,1) 201px, rgba(13,172,18,1) 100%);
}

And you can also make SVG-shku.

Answer 3

I don't know what difficulties you have here
https://codepen.io/klimsava/pen/zYvyexQ