/**
 * The first commented line is your dabblet’s title
 */

.progress_container {
	width: 80%;
	height: 40px;
	margin: 20px auto;
	padding: 0;
	background: #ccc;
	border: 1px solid #000;
}

.progress_bar {
	height: 40px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1)));
	float: left;
	-webkit-animation: slide 1s ease-in;
}

.progress_number {
	font-size: 2em;
	font-family: arial;
	color: #fff;
	position: fixed;
	width: inherit;
	text-align: center;
	text-shadow: 1px 1px #000;
}

@-webkit-keyframes slide {
	0%   { width: 0%; }
	100% {  }
}