# Progress Overlay This page covers the progress overlay that appears automatically during `convert()` and `download()`: its DOM, how progress is computed, localization, and styles. ## DOM Structure The overlay is a single element appended to the end of `` and removed automatically when work finishes: ```html

Processing 66%

``` | Attribute | Content | |---|---| | `class` | Always `pdf2image-loading` | | `data-percent` | An integer from 0 to 100; the stylesheet sizes the bar from this value | | `

` text | Phase label plus percentage | ## Progress Sources | Phase | Computation | Label (English / Chinese) | |---|---|---| | Conversion | `round(finished pages / total pages × 100)` | `Processing N%` / `解析中 N%` | | Compression | The `percent` reported by JSZip `generateAsync`, rounded | `Preparing zip N%` / `準備壓縮檔 N%` | The conversion overlay appears only after the PDF parses successfully; a parse failure never shows it. ```demo ``` ## Localization The package reads `navigator.language` (or `navigator.userLanguage`) once at load. A value starting with `zh` (case-insensitive) selects Chinese labels; anything else uses English. Changing the language after load has no effect. ## Styles The stylesheet is injected at load from `cdn.jsdelivr.net/npm/@pardnchiu/pdf2image@latest/dist/pdf2image.css`: - The overlay is a 240×16px rounded bar, `position: absolute` at `top: calc(50% - 12px)` and `left: calc(50% - 120px)` - The progress bar is the `::after` pseudo-element, whose width maps `[data-percent="N"]` selectors to `N%` - Because it uses `absolute` rather than `fixed`, the overlay can sit outside the viewport on a scrolled page; override `div.pdf2image-loading` in your own stylesheet when needed ## Related Pages - [Conversion](/conversion) - [ZIP Download](/zip-download)