From 9065114ef040023785d0a08c7e419f3b6b9570b8 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Thu, 22 Dec 2011 21:25:15 -0800
Subject: [PATCH] progress bar is now a div and uses the same transition +
 easing as slides (fixes #6)

---
 README.md    |  1 +
 css/main.css | 38 +++++++++++++++++---------------------
 index.html   |  4 +++-
 js/reveal.js |  6 +++---
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index a9aeccd0..516add42 100644
--- a/README.md
+++ b/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)
 
diff --git a/css/main.css b/css/main.css
index 25a45a6d..95971231 100644
--- a/css/main.css
+++ b/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); 
-	   -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); 
+	-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);
+	     -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 {
-	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 {
+.progress {
 	position: absolute;
 	display: none;
 	height: 4px;
 	width: 100%;
 	bottom: 0;
 	left: 0;
-	padding: 0;
-	margin: 0;
 
-	border: 0;
-	outline: 0;
-	background: none;
+	background: rgba(0,0,0,0.2);
 }
+	
+	.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
diff --git a/index.html b/index.html
index b9fe4aef..2e7a002a 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/js/reveal.js b/js/reveal.js
index c3323247..79437aed 100644
--- a/js/reveal.js
+++ b/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();