<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];
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.