HOME  >   CSS3 ANIMATION  >   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:

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.

Advertisement

How to Make the Progress bar of the Scoring Statistical Column Chart in CSS3
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')
});                        

Advertisement