I'm trying to get this:

Is it possible to achieve this only with CSS or JavaScript?

The width of the progress bar is calculated dynamically.

.average-rating * {
  box-sizing: border-box;
}
.average-rating {
  position: relative;
  width: 200px;
  height: 40px;
}
.average-rating .progress {
  position: absolute;
  height: 100%;
  background-color: #66ff66;
  z-index: -1;
}
.average-rating .balls {
  display: flex;
  width: 100%;
  height: 100%;
}
.average-rating .balls div {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #006600;
}

<div class="average-rating">
  <div class="progress" style="width: 50%;"></div>
  <div class="balls">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Here is the base of the code I am working on. I don't know if the HTML structure is well organized to achieve this nor even if there is an easy way to achieve this in CSS or JS.

CodePudding user response：

Use a mask with a repeating radial-gradient :

Show code snippet

.average-rating * {
  box-sizing: border-box;
}
.average-rating {
  position: relative;
  width: 200px;
  height: 40px;
  
  -webkit-mask: 0 0 / 40px 40px radial-gradient(circle, #f00 0 20px, #f000 21px) repeat-x;
  mask: 0 0 / 40px 40px radial-gradient(circle, #f00 0 20px, #f000 21px) repeat-x;
}
.average-rating .progress {
  position: absolute;
  height: 100%;
  background-color: #66ff66;
  z-index: -1;
}
.average-rating .balls {
  display: flex;
  width: 100%;
  height: 100%;
}
.average-rating .balls div {
  flex: 1;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #006600;
}

<div class="average-rating">
  <div class="progress" style="width: 50%;"></div>
  <div class="balls">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>