How to Make the Progress bar of the Scoring Statistical Column Chart in CSS3

How to Make the Progress bar of the Scoring Statistical Column Chart in CSS3: BY Christopher13 Nov,2020; Tags:
CSS3 Score Statistics

Introduction

What we are going to share today is a CSS3 scoring statistics application, which uses the characteristics of column statistics and progress bars, and is relatively simple and beautiful overall.

How to Make the Progress bar of the Scoring Statistical Column Chart in CSS3

Instructions

HTML Body Code

<div class="reviews-container">
	<h2>Reviews</h2>
	<div class="review">
		<span class="icon-container">5 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="68"></div>
		</div>
		<span class="percent">68%</span>
	</div>
	<div class="review">
		<span class="icon-container">4 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="13"></div>
		</div>
		<span class="percent">13%</span>
	</div>
	<div class="review">
		<span class="icon-container">3 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="9"></div>
		</div>
		<span class="percent">9%</span>
	</div>
	<div class="review">
		<span class="icon-container">2 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="3"></div>
		</div>
		<span class="percent">3%</span>
	</div>
	<div class="review">
		<span class="icon-container">1 <i class="fas fa-star"></i></span>
		<div class="progress">
			<div class="progress-done" data-done="7"></div>
		</div>
		<span class="percent">7%</span>
	</div>
</div>

Css Code

* {
	box-sizing: border-box;
}

body {
	background: linear-gradient(to right, #9796f0, #fbc7d4);
	color: #333;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: 'Muli';
	height: 100vh;
	margin: 0;
}

.reviews-container {
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 0.3);
	padding: 20px;
}

.review {
	border: 1px solid transparent;
	border-radius: 5px;
	color: #777;
	display: flex;
	font-size: 12px;
	align-items: center;
	padding: 10px;
	margin: 5px 0;
}

Js Code

const progressDone = document.querySelectorAll('.progress-done');

progressDone.forEach(progress => {
	progress.style.width = progress.getAttribute('data-done') + '%';
});

const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
	social_panel_container.classList.toggle('visible')
});

close_btn.addEventListener('click', () => {
	social_panel_container.classList.remove('visible')
});

VIEW NOW