class numPagesDecor extends Paged.Handler {
    constructor(chunker, polisher, caller) {
      super(chunker, polisher, caller);
    }

    afterRendered(pages){
      let totalPages = pages.length;
      let symbol = "/";
      pages.forEach(function(page){
        let pageElement = page.element;
        const numPage = parseInt(pageElement.dataset.pageNumber);

        const area = pageElement.querySelector(".pagedjs_area");
        if (area) {
          const container = document.createElement("div");
          container.className = "running-page_container";

          const progress = (numPage / totalPages) * 100;

          const symbols = document.createElement("div");
          symbols.className = "symbols";
          symbols.style.width = `${progress}%`;
          symbols.style.wordBreak = "break-all";
          symbols.style.overflowWrap = "anywhere";

          const dots = document.createElement("div");
          dots.className = "dots";
          dots.textContent = ".".repeat(100);

          const runningPage = document.createElement("div");
          runningPage.className = "running-page";
          runningPage.appendChild(symbols);
          runningPage.appendChild(dots);
          container.appendChild(runningPage);
          area.after(container);

          symbols.textContent = symbol;
          const baseHeight = symbols.offsetHeight;
          let count = 1;
          while (count < 2000) {
            count++;
            symbols.textContent = symbol.repeat(count);
            if (symbols.offsetHeight > baseHeight) {
              symbols.textContent = symbol.repeat(count - 1);
              break;
            }
          }

        }
      });
    }

}

Paged.registerHandlers(numPagesDecor);