Change spinnerEl

[bgastaldi]

Describe the bug

I would like to know how it is possible to change the image/html of the spinner.

Reproduction

I tried to do it the way below, but it only changes when the element already exists.

reveal: function(fancybox, slide) {
    slide.spinnerEl.insertAdjacentHTML(
        "afterbegin",
        `<div class="f-spinner"><div class="sk-chase sk-primary mx-auto"><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div><div class="sk-chase-dot"></div></div>`
    )
},

Any idea?

Additional context

No response

[fancyapps]

Hi,

Use the loading event to create your own element and specify it as slide.spinnerEl. Example:

Fancybox.bind('[data-fancybox="gallery"]', {
  on: {
    loading: (_fancybox, slide) => {
      const div =  document.createElement("div");
      div.classList.add('f-spinner')
      div.innerHTML = 'LOADING...'

      slide.el.prepend(div);

      slide.spinnerEl = div;
    },
  },
});  

https://jsfiddle.net/yso5acL3/

[bgastaldi]

So cool!

This project is fantastic. I bought the license on Tuesday to ensure continuous project development and support.

Thanks a lot!