progress bar is now a div and uses the same transition + easing as slides (fixes #6)

README.md

@@ -6,6 +6,7 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak
 
 # Examples
 
+* http://lab.hakim.se/reveal-js/ (original)
 * http://www.ideapolisagency.com/ from [@achrafkassioui](http://twitter.com/achrafkassioui)
 * http://lucienfrelin.com/ from [@lucienfrelin](http://twitter.com/lucienfrelin)
 

css/main.css

@@ -131,9 +131,9 @@ h1 {
 	   -moz-transform-style: preserve-3d;
 	        transform-style: preserve-3d;
 	
-	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
+	-webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
+	   -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 
+	     -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
@@ -447,32 +447,28 @@ section img {
  * PROGRESS BAR
  *********************************************/
 
-progress::-webkit-progress-bar {
+.progress {
-	background: rgba(0,0,0,0.2);
-}
-
-progress::-moz-progress-bar {
-	background: hsl(185, 85%, 50%);
-}
-
-progress::-webkit-progress-value {
-	background: hsl(185, 85%, 50%);
-}
-
-progress {
 	position: absolute;
 	display: none;
 	height: 4px;
 	width: 100%;
 	bottom: 0;
 	left: 0;
-	padding: 0;
-	margin: 0;
 
-	border: 0;
+	background: rgba(0,0,0,0.2);
-	outline: 0;
-	background: none;
 }
+	
+	.progress span {
+		display: block;
+		background: hsl(185, 85%, 50%);
+		height: 100%;
+		width: 0px;
+
+		-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		   -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		     -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+		        transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+	}
 
 /*********************************************
  * ROLLING LINKS

index.html

@@ -179,7 +179,7 @@ linkify( 'a' );
 		</aside>
 
 		<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
-		<progress min=0 max=100 value=0></progress>
+		<div class="progress"><span></span></div>
 		
 		<script src="js/reveal.js"></script>
 		<script src="lib/highlight.js"></script>
@@ -200,6 +200,8 @@ linkify( 'a' );
 
 			hljs.initHighlightingOnLoad();
 		</script>
+
+
 		
 	</body>
 </html>

js/reveal.js

@@ -94,7 +94,8 @@ var Reveal = (function(){
 	 */
 	function initialize( options ) {
 		// Cache references to DOM elements
-		dom.progress = document.querySelector( 'body>progress' );
+		dom.progress = document.querySelector( 'body>.progress' );
+		dom.progressbar = document.querySelector( 'body>.progress span' );
 		dom.controls = document.querySelector( '.controls' );
 		dom.controlsLeft = document.querySelector( '.controls .left' );
 		dom.controlsRight = document.querySelector( '.controls .right' );
@@ -122,7 +123,6 @@ var Reveal = (function(){
 
 		if( config.progress ) {
 			dom.progress.style.display = 'block';
-			dom.progress.max = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1;
 		}
 
 		if( config.theme !== 'default' ) {
@@ -313,7 +313,7 @@ var Reveal = (function(){
 
 		// Update progress if enabled
 		if( config.progress ) {
-			dom.progress.value = indexh;
+			dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
 		}
 
 		updateControls();