| API | Shows | Use when |
|---|---|---|
| app.preloader.show() | Spinner over the app | A short wait that blocks everything |
| app.preloader.showIn(el) | Spinner over one element | Part of the screen is waiting |
| app.dialog.progress(title, pct) | Bar in a dialog | The size of the job is known |
| app.progressbar.show(el, pct) | Thin bar atop el | Background work; the page stays usable |
| Skeletons (Skeleton Loading States) | Grey content shapes | Loading a list or cards |
The book page's actions sheet gains "Download a sample chapter". downloadSample() in api.js reports 20% every 300 ms; the handler feeds a progress dialog, then shows a toast with a check icon:
const dialog = $f7.dialog.progress('Downloading sample', 0);
await downloadSample(book.id, (pct) => {
dialog.setProgress(pct);
dialog.setText(`${pct}% of 48 KB`);
console.log(`sample of book ${book.id}: ${pct}%`);
});
dialog.close();Output
sample of book 3: 20% sample of book 3: 40% ... sample of book 3: 100%
Omit the percentage for an endless bar. The modal preloader is a flag, not a counter: two show() calls left one .preloader-modal and a single hide() removed it, so with overlapping requests the first to finish hides the spinner. Count requests yourself, or use showIn() per element.