<h2>Weekly Coding Challenge #14 - Progress Bar</h2>
<div class="progress-bar">
	<div data-size="20" class="progress"></div>
</div>
<div class="progress-bar">
	<div data-size="40" class="progress"></div>
</div>
<div class="progress-bar">
	<div data-size="60" class="progress"></div>
</div>
<div class="progress-bar">
	<div data-size="80" class="progress"></div>
</div>

<footer>
	<p>
		Created with <i class="fa fa-heart"></i> by
		<a target="_blank" href="https://florin-pop.com">Florin Pop</a>
		- Read how I created this and how you can join the challenge
		<a target="_blank" href="https://www.florin-pop.com/blog/2019/06/how-to-create-a-custom-progress-bar/">here</a>
	</p>
</footer>
@import url('https://fonts.googleapis.com/css?family=Lato');

* {
	box-sizing: border-box;
}

body {
	background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	min-height: 100vh;
	font-family: 'Lato', sans-serif;
	margin: 0;
}

h2 {
	text-align: center;
}

.progress-bar {
	background-color: #fefefe;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	margin: 15px;
	height: 30px;
	width: 500px;
	max-width: 100%;
}

.progress {
	background: #ad5389;
	background: -webkit-linear-gradient(to bottom, #3c1053, #ad5389);
	background: linear-gradient(to bottom, #3c1053, #ad5389);
	border-radius: 3px;
	height: 30px;
	width: 0;
	transition: width 0.5s ease-in;
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}
const progress_bars = document.querySelectorAll('.progress');

progress_bars.forEach(bar => {
	setTimeout(() => {
		const { size } = bar.dataset;
		bar.style.width = `${size}%`
	}, 1000);
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.