campiaperti/infra
1
0
Fork 1
Code Issues Pull requests 1 Releases Wiki Activity

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

Browse source
This commit is contained in:
Hakim El Hattab 2011-12-22 21:25:15 -08:00
parent 91c3056a62
commit 9065114ef0
4 changed files with 24 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -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)

38
css/main.css
View file

@ -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

4
index.html
View file

@ -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>

6
js/reveal.js
View file

@ -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();