Progressbar and pagexounter for impress.js presentation
JavaScript CSS
Switch branches/tags
Nothing to show
Latest commit ae023c4 Feb 6, 2014 @m42e Update
Failed to load latest commit information.
css Added JS and CSS files, Updated Readme Dec 2, 2012
js Update impress-progress.js May 21, 2013 Update Feb 6, 2014


Progressbar and pagexounter for impress.js presentations Requires the steps to be submitted on impress:init event, see and for details.


Add a div for progressbar and/or progress as you can see it here:

<div class="progressbar"><div></div></div>
<div class="progress"></div>

include the CSS in the header

<link href="css/impress-progress.css" rel="stylesheet" />

and include the script

<script src="js/impress-progress.js"></script>

just before including impress.js.

That's it.

Feel free to change the style of your progressbar as you like by editing the CSS file.


Until m42e/impress.js@f367c84 isn't accepted there's the need to patch js/impress.js to add the steps data to init().

Changing line 402 like this:

triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ], steps: steps });