Progress element

by sanford

HTML

<!-- Let's create a beautiful HTML5 progress bar and style it with CSS3. For the markup, we'll use the progress element and then style it by using the webkit specific properties like "-webkit-progress-bar, -webkit-progress-value" -->

<progress max="100" value="50"></progress>

<!-- You must be having the default progress bar now on the output pane, if not, then your browser doesn't support the new HTML5 elements. Please upgrade your browser. -->

CSS

/* Moving on to the styling, we'll start with the main progress bar first and then the value part of it. After that, we'll do some experiments :D */
body {
	background: silver;
}

progress {
	width: 100px;
	height: 9px;
	margin: 50px auto;
	display: block;
	/* Important Thing */
	-webkit-appearance: none;
  -moz-appearance: none;
	border: none;
}

/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
	ZZborder-radius: 50px;
  background: red;
	padding: 2px;
	box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
  background: orange url(http://www.figureone.com/favicon.png) no-repeat 100% 0;
}

progress::-moz-progress-bar { 
  background: green;
}
progress {
  background: orange url(http://www.figureone.com/favicon.png) no-repeat 100% 0;
}


/* Now the value part */
progress::-webkit-progress-value {
	background: green;	
  height: 9px;
  position:relative;
  top: -2px;
  left: -2px;
	/* Looks great, now animating it */
	ZZbackground-size: 25px 14px, 100% 100%, 100% 100%;
}