Add progress bar plugin by Matthias Bilger (@m42e).
Originally from https://github.com/m42e/impress.js-progress and adapted for the new plugin api. Also made the sample CSS produce a smaller bar and font. Adds event.detail.next to impress:stepleave event in impress.js.
This commit is contained in:
46
src/plugins/progress/README.md
Normal file
46
src/plugins/progress/README.md
Normal file
@@ -0,0 +1,46 @@
|
||||
Progress plugin
|
||||
===============
|
||||
|
||||
Progressbar and pagexounter for impress.js presentations
|
||||
|
||||
Usage
|
||||
-----
|
||||
|
||||
Add a div for progressbar and/or progress as you can see it here:
|
||||
|
||||
### HTML
|
||||
|
||||
<div class="impress-progressbar"><div></div></div>
|
||||
<div class="impress-progress"></div>
|
||||
|
||||
### Sample CSS
|
||||
|
||||
.impress-progressbar {
|
||||
position: absolute;
|
||||
right: 318px;
|
||||
bottom: 1px;
|
||||
left: 118px;
|
||||
border-radius: 7px;
|
||||
border: 2px solid rgba(100, 100, 100, 0.2);
|
||||
}
|
||||
.impress-progressbar DIV {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
border-radius: 5px;
|
||||
background: rgba(75, 75, 75, 0.4);
|
||||
transition: width 1s linear;
|
||||
}
|
||||
.impress-progress {
|
||||
position: absolute;
|
||||
left: 59px;
|
||||
bottom: 1px;
|
||||
text-align: left;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
Feel free to change the style of your progressbar as you like by editing the CSS file.
|
||||
|
||||
Author
|
||||
------
|
||||
|
||||
Copyright 2014: Matthias Bilger (@m42e)
|
||||
Reference in New Issue
Block a user