<div class="rating">
  <div class="rating__item" data-stars="5">
    <div class="rating__text">5 stars</div>
    <div class="rating__bar-container">
      <div class="rating__bar" data-bar></div>
    </div>
    <div class="rating__text" data-count></div>
  </div>
  <div class="rating__item" data-stars="4">
    <div class="rating__text">4 stars</div>
    <div class="rating__bar-container">
      <div class="rating__bar" data-bar></div>
    </div>
    <div class="rating__text" data-count></div>
  </div>
  <div class="rating__item" data-stars="3">
    <div class="rating__text">3 stars</div>
    <div class="rating__bar-container">
      <div class="rating__bar" data-bar></div>
    </div>
    <div class="rating__text" data-count></div>
  </div>
  <div class="rating__item" data-stars="2">
    <div class="rating__text">2 stars</div>
    <div class="rating__bar-container">
      <div class="rating__bar" data-bar></div>
    </div>
    <div class="rating__text" data-count></div>
  </div>
  <div class="rating__item" data-stars="1">
    <div class="rating__text">1 stars</div>
    <div class="rating__bar-container">
      <div class="rating__bar" data-bar></div>
    </div>
    <div class="rating__text" data-count></div>
  </div>
</div>

:root {
  --font-family: Montserrat, 'Segoe UI', Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font: 16px var(--font-family);
}

.rating {
  display: flex;
  flex-direction: column;
}

.rating__item {
  display: grid;
  grid-template-columns: 80px 1fr 80px;
}

.rating__text,
.rating__bar-container{
  padding: 10px;
}

.rating__bar-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.rating__bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #f2f2f2;
  overflow: hidden;
}

.rating__bar::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--progress, 0) * 100%);
  height: 100%;
  border-radius: 5px;
  background: var(--color, #333333);
  content: '';
}

[data-stars="5"] {
  --color: #4eb751;
}

[data-stars="4"] {
  --color: #a4d630;
}

[data-stars="3"] {
  --color: #f7e640;
}

[data-stars="2"] {
  --color: #fea529;
}

[data-stars="1"] {
  --color: #ee3f1e;
}

const rating = {
  5: 211,
  4: 114,
  3: 57,
  2: 32,
  1: 11
};
const total = Object.values(rating).reduce((accumulator, value) => (accumulator + value));

for (let stars in rating) {
  const container = document.querySelector(`[data-stars="${stars}"]`);
  const bar = container.querySelector('[data-bar]');
  const count = container.querySelector('[data-count]');
  
  bar.style.setProperty('--progress', rating[stars] / total);
  count.textContent = rating[stars];
}