Remark: Progress bar instead of slide numbers

[royfrancis]

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

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

[saul]

This is quite simple to emulate.

In your CSS, add:

    .remark-slide-number {
      position: inherit;
    }

    .remark-slide-number .progress-bar-container {
      position: absolute;
      bottom: 0;
      height: 2px;
      display: block;
      left: 0;
      right: 0;
    }

    .remark-slide-number .progress-bar {
      height: 100%;
      background-color: red;
    }

Then in your remark options, use this slideNumberFormat:

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

Hope that helps

[utdrmac]

@saul Do you think you could turn this into a PR as an option? "counter" would be the existing (default) way with slide numbers and "bar" would be what you've added.

var slideshow = remark.create({
  progressStyle: [ counter | bar ]
})

[royfrancis]

@utdrmac It should be possible to use both. [counter | bar | counter,bar].

[juancarloscastillo]

This is a great feature, but: It there a way to have the progress bar and the slide numbers? This would be great, specially having the bar at the top and the numbers at the bottom, so far I have just managed to have the bar at the top,

.remark-slide-number {
  position: fixed;
  top: 0px;
  left: 0px;
}

.remark-slide-number .progress-bar-container {
  position: absolute;
  bottom: 10;
  height: 8px;
  display: block;
  left: 0;
  right: 0;
}

.remark-slide-number .progress-bar {
  height: 100%;
  background-color: red;
}