[SOLVED] Can I use ms-Spinner in my office-js Excel web add-in without a framework such as 'react'?

Can I use ms-Spinner in my office-js Excel web add-in without a framework such as 'react'?

I've built an Excel add-in (Using Office-js, TypeScript, HTML, JQuery, CSS, Visual Studio 2019) which manipulates an Excel spreadsheet, and I'd like to display progress messages with a progress spinner. I think the ms-Spinner in UI Fabric would fit the bill. Can I use it with HTML/JQuery/CSS or do I need a framework like react?

I've tried this in javascript, but it throws an exception:

        var spin = document.querySelector('.ms-Spinner');
        if (spin) spinnerComponent = new components.Spinner(spin);
        // Unhide and start the spinner
        $(".ms-Spinner").show();
        if (spinnerComponent) spinnerComponent.start();

Solution

If you want to the spinner from Fabric React, then you have to use React. However, there is a non-React set of Fabric controls at Fabric.js including a spinner which you can use. That said, we used it in this sample and it seldom actually renders: PowerPoint Add-in Microsfot Graph ASP.NET InsertChart.