<div class="progress"></div>
<button id="btn">click</button>
body,html {
	background-color: #34495e;
}
.progress {
	margin: 45px auto 15px;
	width: 80%;
	max-width: 400px;
	height: 4px;
	border-radius: 2px;
	background-color: rgb(197, 197, 197);
}

.progress::before {
	content: '';
	display: block;
	width: 50%;
	height: 100%;
	border-radius: 2px;
	background-color: brown;
	transition: .5s ease-in-out;
}

#btn {
	display: block;
	margin: 15px auto;
}
document.getElementById('btn').onclick = () => {
	document.styleSheets[0]
		.addRule('.progress:before', 'width:' + 	Math.random() * 100 + '%')
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.