Progressbar

It is possible to use a progress bar instead of slide number.

• In the YAML header, add the following code under nature:

    nature:
      slideNumberFormat: |
        <div class="progress-bar-container">
          <div class="progress-bar" style="width: calc(%current% / %total% * 100%);">
          </div>
        </div>`

• Put the following style in your custom CSS, or include them in the xaringan main content between a pair of style tags (<style></style>)

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

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

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

A demo

(Source and a full example): issue #109)