Replacing the Default Mendix Progress Spinner with a Custom SVG Loader

I wanted to replace the default Mendix progress loading with a custom branded SVG loader so that the loading experience matches the overall UI theme of my application.

Instead of modifying any Mendix core files, I handled this entirely from the theme layer. My goal was to keep the solution clean, upgrade-safe, and maintainable.

First, I placed my custom SVG file (filename_loader.svg) inside the theme directory:

themesource/<my_theme>/web/

After that, I updated the main.scss file and overrode the default .mx-progress-indicator styling. I hid the built-in spinner and its pseudo-elements, then applied my SVG as a centered background image.

Here is the SCSS I used:

.mx-progress-indicator .mx-progress-spinner,
.mx-progress-indicator::before,
.mx-progress-indicator::after {
    display: none !important;
}

.mx-progress-indicator {
    width: 340px !important;
    height: 160px !important;
    margin: auto !important;

    background-image: url("filename_loader.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

What this does is:

• It hides the default Mendix spinner element
• It removes the animated pseudo-elements Mendix uses internally
• It keeps the main progress container intact
• It applies the custom SVG loader as the visible loading indicator

After rebuilding the theme using “Rebuild Native Styling” in Studio Pro), the custom loader replaces the default spinner globally — including during page loads, microflow execution, and data loading.