Progress Bar

index.html

<div id="barcontainer">
	<div id="bar">
		<div id="progress"></div>
	</div>
	
	<button onclick="resize()">Click me!</button>
</div>

<!-- Simple web progress bar -->

<!-- Use only the "bar" and "progress" id's (CSS and HTML) for a webpage.  The rest is just pen formatting.  Write custom JS to change the width of "progress" -->

progress-bar.markdown

Progress Bar

A Pen by Ben Ayers on CodePen.

License.

script.js

function resize() {
	var bar = document.getElementById("progress");
	bar.style.width = ((Math.random() * 250) + 50) + "px";
};

style.css

/* Relevant progress bar CSS */
#bar {
	background: white;
	width: 300px;
	height: 4px;
	border-radius: 3px;
	margin: auto;
}

#progress {
	width: 200px;
	height: 4px;
	border-radius: 3px;
	
	background: #e03f97;
	background: -webkit-linear-gradient(to right, #f47c34, #e03f97);
	background: -o-linear-gradient(to right, #f47c34, #e03f97);
	background: -moz-linear-gradient(to right, #f47c34, #e03f97);
	background: linear-gradient(to right, #f47c34, #e03f97);
	
	-webkit-transition:400ms cubic-bezier(0.6,0,0.28,1);
	-moz-transition:400ms cubic-bezier(0.6,0,0.28,1);
	-o-transition:400ms cubic-bezier(0.6,0,0.28,1);
	-ms-transition:400ms cubic-bezier(0.6,0,0.28,1);
	transition:400ms cubic-bezier(0.6,0,0.28,1);
}

/* Other CSS */
body {
	background: #282828;
}

#barcontainer {
	margin: auto;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0px;
	width: 300px;
	height: 50px;
}

div {
	text-align: center;
}

button {
	margin-top: 40px;
	
	display: inline-block;
	border: none;
	background: #666;
	padding: 15px;
	color: #fff;
	
	font-family: "Avenir Light";
	font-size: 16px;
}

button:hover {
	background: #fff;
	box-shadow: 0px 0px 20px #000;
	
	transition: 150ms linear;
	color: #000;
}