How can i show a Loading Spinner while loading data-type="iframe"

[mDesignHub]

I woukld like to show an Loading Spinner, which doesn#T by default. Where should i place the code. I have this.

<a data-fancybox="demo" data-type="iframe" data-preload="false" data-custom-class="fancybox_1900" href="page.php?idn=123"><b>Page which loads content or curls a website</b></a>

<script src="//cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script> <script> console.log(Fancybox); //Fancybox.defaults = {};

Fancybox.bind('[data-fancybox]', {
Toolbar: {
display: {
left: [
'prev',
'infobar',
'next',
],
middle: [
'zoomIn',
'zoomOut',
'toggle1to1',
'reset',
],
right: [
'slideshow',
'fullscreen',
'download',
'thumbs',
'close'
],
},
}, /* Toolbar /
Thumbs: {
type: 'modern',
},
Html: {
preload: false,
videoAutoplay: false,
},
}); / fancybox5 */

//Fancybox.show([{
// src: "-incl-test-Fancybox5AjaxBugTag.php",
// type: "ajax",
// customClass: 'fancybox_0900',
//}]);
</script>

[fancyapps]

Hi,

The loading spinner is displayed by default when the page is preloading. If you set data-preload="false", the page is not preloaded and is displayed "as is".

If you can control content of your page, then you could display loading icon by yourself.

Or you could force to display loading icon using this code snippet:

Fancybox.getInstance().showLoading(Fancybox.getSlide())

btw, if you do that and wonder why conter is not visible, then it is due to this CSS snippet:

.is-loading .fancybox__content {
    opacity: 0;
}

[mDesignHub]

Thanks a lot.

1. data-preload="true" makes the spinner visible. but i thought it's better for performance not to preload content.

Fancybox.bind('[data-fancybox]', { ... my Code above ... });
Fancybox.getInstance().showLoading(Fancybox.getSlide());

gives me an errror. where is this to place ?
Uncaught TypeError: Cannot read properties of null (reading 'showLoading')

[fancyapps]

If you have access to the iframed page, then you call it using window.parent.Fancybox.getInstance().showLoading(window.parent.Fancybox.getSlide()).
Or use events - https://fancyapps.com/fancybox/api/events/