Forge Viewer 7版本（含7.28及后续版本）Loading Spinner自定义可行性咨询

Great questions about customizing the loading spinner in Forge Viewer 7! Let’s break this down clearly:

Core Answers #

• Forge Viewer 7 overall does support custom loading spinners — but the implementation approach shifted in v7.28 due to the spinner component refactor noted in the changelog.
• v7.28 and later versions still fully support customization; you just need to adapt to the new spinner component structure.

Customization Approaches by Version #

1. Pre-v7.28 Versions #

Before v7.28, you could directly use the viewer.setSpinner() method to replace the default spinner with your own DOM element:

const customSpinner = document.createElement('div');
customSpinner.style.cssText = 'width: 50px; height: 50px; border: 4px solid #ccc; border-top-color: #1a73e8; border-radius: 50%; animation: spin 1s linear infinite;';
viewer.setSpinner(customSpinner);

2. v7.28+ Versions #

In v7.28+, the Viewer switched to using the Forge UI Kit's spinner component, which uses updated CSS classes. Here are two reliable ways to customize it:

Option A: Override CSS (Simplest)

Target the new spinner classes to replace its appearance with your own:

/* Hide the default Forge spinner */
.adsk-viewing-viewer .forge-spinner {
    display: none;
}

/* Add your custom spinner styling */
.adsk-viewing-viewer .forge-spinner-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.adsk-viewing-viewer .forge-spinner-container::before {
    content: '';
    width: 60px;
    height: 60px;
    border: 4px solid #f0f0f0;
    border-top-color: #0066cc;
    border-radius: 50%;
    animation: custom-spin 1.2s linear infinite;
}

@keyframes custom-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Just include this CSS after the Viewer's default stylesheets to ensure it takes precedence.

Option B: Replace DOM Element (Full Control)

If you need a custom HTML structure (like an animated GIF or SVG), hook into Viewer events to swap the spinner:

// Wait for the Viewer to initialize and the spinner container to exist
viewer.addEventListener(Autodesk.Viewing.INITIALIZED_EVENT, () => {
    const spinnerContainer = document.querySelector('.forge-spinner-container');
    if (!spinnerContainer) return;

    // Remove the default spinner
    const defaultSpinner = spinnerContainer.querySelector('.forge-spinner');
    if (defaultSpinner) defaultSpinner.remove();

    // Create and add your custom spinner
    const customSpinner = document.createElement('div');
    customSpinner.className = 'my-custom-spinner';
    customSpinner.innerHTML = `
        <img src="path/to/your/custom-spinner.gif" alt="Loading model..." />
        <p>Please wait while we load your model</p>
    `;
    spinnerContainer.appendChild(customSpinner);
});

For better control over visibility, you can also listen to Autodesk.Viewing.PROGRESS_UPDATE_EVENT or Autodesk.Viewing.GEOMETRY_LOADED_EVENT to show/hide your spinner as needed.

Key Notes #

• The v7.28 changelog mentioned the spinner refactor to align with Forge UI standards, which is why older setSpinner() behavior might not work as expected.
• Always test your customization against your target Viewer version — CSS class names or DOM structure could change in future updates.

内容的提问来源于stack exchange，提问作者Christopher Git Daniel