FVL v1.0.0

FantroveVerse Loader (FVL)

Framework เธซเธ™เน‰เธฒเน‚เธซเธฅเธ”เนเธขเธเธญเธญเธเธˆเธฒเธ nav-core โ€” เธฃเธญเธ‡เธฃเธฑเธš 4 display modes, lightweight, zero dependencies, เธ—เธณเธ‡เธฒเธ™เธฅเธทเนˆเธ™เน„เธซเธฅเธšเธ™เธ—เธธเธเธชเน€เธ›เธ„

โ‘  Fullscreen Mode

Overlay เน€เธ•เน‡เธกเธซเธ™เน‰เธฒเธˆเธญ โ€” เนƒเธŠเน‰เธ•เธญเธ™เน€เธ›เธฅเธตเนˆเธขเธ™เธซเธ™เน‰เธฒเธซเธฃเธทเธญเน‚เธซเธฅเธ”เธ‚เน‰เธญเธกเธนเธฅเนƒเธซเธเนˆ เน€เธซเธกเธฒเธฐเธเธฑเธš fullscreen transitions

// เธ„เนˆเธฒ default โ€” เนƒเธŠเน‰ singleton ID
const h = FVL.show({
  message: 'เธเธณเธฅเธฑเธ‡เน‚เธซเธฅเธ”...',
  autoHideAfterMs: 4000
});
h.hide();

โ‘ก Scoped Mode

เธ„เธฃเธญเธš container เน€เธ‰เธžเธฒเธฐ เน€เธŠเนˆเธ™ เธเธฒเธฃเนŒเธ”/section เนƒเธ”เน† เน„เธกเนˆเน€เธ•เน‡เธกเธˆเธญ เนเธ„เนˆเธ„เธฃเธญเธšเธžเธทเน‰เธ™เธ—เธตเนˆเธ—เธตเนˆเธเธณเธซเธ™เธ”

FVL.scoped({
  target: '#demo-scoped-box',
  message: 'Fetching...'
});

โ‘ข Inline Mode

เน€เธฅเน‡เธ เนเธ—เธฃเธเนƒเธ™เธ›เธธเนˆเธก/element เนƒเธ”เน† โ€” เน€เธซเธกเธฒเธฐเธเธฑเธš submit button เธซเธฃเธทเธญ action button

FVL.inline({
  target: '#my-btn'
});
// เธซเธฃเธทเธญ replace content:
FVL.inline({
  target: '#my-btn',
  replaceContent: true,
  message: 'Working...'
});

โ‘ฃ Topbar Mode

Progress bar เธšเธฒเธ‡เน† เธ•เธดเธ”เธ”เน‰เธฒเธ™เธšเธ™ viewport โ€” เน€เธซเธกเธทเธญเธ™ NProgress เน€เธซเธกเธฒเธฐเธเธฑเธš navigation เธฃเธฐเธซเธงเนˆเธฒเธ‡เธซเธ™เน‰เธฒ

// indeterminate:
FVL.topbar();

// determinate (0..1):
const h = FVL.topbar({ progress: 0.3 });
h.setProgress(0.7);
h.hide();

Scoped target demo

เธเธ”เธ›เธธเนˆเธก "Show in box โ†’" เธ”เน‰เธฒเธ™เธšเธ™เน€เธžเธทเนˆเธญเน‚เธซเธฅเธ” scoped loader เนƒเธ™เธเธฃเธญเธšเธ™เธตเน‰

Original content here โ€” loader will overlay this area.

FVL.stats()

System events

Backward Compatibility

API เน€เธ”เธดเธกเธˆเธฒเธ nav-core เธ—เธณเธ‡เธฒเธ™เน€เธซเธกเธทเธญเธ™เน€เธ”เธดเธกเธœเนˆเธฒเธ™ proxy:

// เน€เธซเธฅเนˆเธฒเธ™เธตเน‰เธ—เธณเธ‡เธฒเธ™เน€เธซเธกเธทเธญเธ™เน€เธ”เธดเธก:
window.showInstantLoadingOverlay('Loading...');
window.removeInstantLoadingOverlay();
window._navCore_contentLoadingManager.show();
NavCoreModules.LoadingService.hide();