Excel Addin transparent Dialog

Question

I am implementing a loading dialog for Excel addin to let user know its in process, need to wait.

I have tried

Office.context.ui.displayDialogAsync("https://localhost:3000/#/dialog/loading",{
                width: 100,
                height: 100
            }, function (asyncResult: Office.AsyncResult<Office.Dialog>): void {
                
              })

But, it will total cover the excel, and I could not see any content under dialog.

While testing with Excel Online Copy link -> To Sheet, I am able to see below behavior.

How to achieve the same behavior in Excel addin?

Answer 1

Set the background color of the dialog page to transparent. There's lots of good information about doing this at Transparent CSS background color