Xaringan: Progress bar instead of slide numbers

[royfrancis]

Is it possible to add a progress bar instead of slide number?

For example, this reveal.js progress bar at the bottom.

[pat-s]

Please see https://github.com/gnab/remark for all kind of available features. xaringan is essentially "just" a wrapper around remark.js.

[yihui]

Yeah, if remark.js supports it, I can certainly support it. If you know JavaScript and CSS, my guess is that you may be able to hack at it by yourself. To me, I don't feel it will be super difficult (parse the page numbers, and apply CSS styles to a div at the bottom), but I certainly don't have time for this.

[pat-s]

If you export your slides as PDF, you might also take a look at impressive.py which has such a feature.

[mschilli87]

the corresponding remark issue: https://github.com/gnab/remark/issues/506

[yihui]

Thanks @mschilli87!

[mschilli87]

Could the solution suggested by @saul in https://github.com/gnab/remark/issues/506#issuecomment-388567271 be implemented in xaringan?

[yihui]

@mschilli87 Sounds like a good idea to me, but I don't have time until perhaps two months later.

[tcgriffith]

I hacked a bit of moon_reader() to get progress bar working now, but I think my solution is not elegant enough for a PR . The main problem is that it's hard to stick the following code into nature of moon_reader.

example slide

rmd source

my hack on moon_reader

Thoughts?

  var slideshow = remark.create({
      slideNumberFormat: (current, total) => `
        <div class="progress-bar-container">
          <div class="progress-bar" style="width: ${current/total*100}%">
          </div>
        </div>
    });

[yihui]

@tcgriffith Your problem was that you cannot pass a JS function slideNumberFormat literally to nature. You can only pass a character string. However, a character string can be enough, if you know the CSS calc() function. Here is a full example:

````

title: "Presentation Ninja"
subtitle: "⚔
with xaringan"
author: "Yihui Xie"
date: "2016/12/12 (updated: r Sys.Date())"
output:
xaringan::moon_reader:
lib_dir: libs
nature:
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
slideNumberFormat: |

`

???

Image credit: Wikimedia Commons

---

class: center, middle

xaringan

/ʃæ.'riŋ.ɡæn/

---

class: inverse, center, middle

Get Started

---

Hello World

Install the xaringan package from Github:

{r eval=FALSE, tidy=FALSE} devtools::install_github("yihui/xaringan")
````

I'd recommend users to put the CSS in an external file, and include it via the css option instead of embedding it in the Markdown source document.

[yihui]

Can someone help create a wiki page to include the above solution? Thanks!

[tcgriffith]

added to wiki:
https://github.com/yihui/xaringan/wiki/Progressbar

[yihui]

Wonderful. Thanks!

[lnalborczyk]

Hi, thank you for these tips!

Probably a stupid question, but is it possible to have both the slide number and the progress bar? If, yes, how would you do it?