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 a9aeccd..516add4 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 25a45a6..9597123 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 b9fe4ae..2e7a002 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 c332324..79437ae 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();
--
GitLab