Is it possible to replace Nuxt 3 default page loading animation?

Question

Answered in this thread, thanks @ReaganM!

We are currently building a Nuxt 3 / Vue 3 / TypeScript web app. We would like to replace the Default Nuxt Loading Indicator on page load/refresh (the animated Nuxt logo). We have defined a custom loading indicator component.

Desired behavior

The loading indicator on page load or refresh should look like this: Custom Loading Indicator. The component is animated, but that is secondary.

What we have tried so far

• Added the <NuxtLoadingIndicator /> as descriped in the Docs, but that does not show up on page load.
• Tried to customize the loading indicator by adding the following lines of code to nuxt.config.ts as described in the Docs, although it is Nuxt 2 and both options did not work.
  Option a) (not the preferred way, but just to test if it does have an effect)

export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass'],
    ssr: false,
    //@ts-ignore
    loadingIndicator: {
    name: 'chasing-dots',
    color: '#604081',
    background: '#ffffff'
  }
  // more configs...
})

Option b)

export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.sass'],
    ssr: false,
    //@ts-ignore
    loading: '~/components/general/LoadingIndicator.vue',
    // more configs...
})

• Tried to use the application hooks page: start and page: finish as described in this Stack Overflow question – no success.

Here is what the LoadingIndicatore.vue component looks like:

<template>
    <div 
        v-if="loading"
        id="loadingIndicator" 
        ref="loadingIndicator" 
        class="loadingIndicator text-center" 
        :style="'margin-top: ' + this.computedYposition + 'px; margin-left: ' + this.computedXposition + 'px'"
    >
        <div class="loadingIndicatorAnimation">
            <img src="~/assets/images/Loader.svg" width="104" height="70">
        </div>
        <div class="text-center loadingText">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            windowHeight: document.documentElement.clientHeight,
            computedXposition: 0,
            computedYposition: 0,
            loading: false
        };
    },
    mounted() {
        window.addEventListener('resize', this.getWindowDimensions);
        this.centerLoadingIndicator();
    },
    unmounted() {
        window.removeEventListener('resize', this.getWindowDimensions);
    },
    methods: {
        getWindowDimensions() {
            this.windowHeight = document.documentElement.clientHeight;
            this.centerLoadingIndicator();
        },
        centerLoadingIndicator() {
            this.computedYposition = '-' + ((this.$refs.loadingIndicator.clientHeight / 2));
            this.computedXposition = '-' + ((this.$refs.loadingIndicator.clientWidth / 2));
        },
        start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    },
}
</script>

<style scoped>
.loadingIndicator
{
    width: 150px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
}

.loadingIndicatorAnimation
{
    -webkit-animation: pulse 2s linear infinite;
    animation: pulse 2s linear infinite;
    opacity: 0.1;
}

@-webkit-keyframes pulse 
{
  50% { opacity: 1; }
}

@keyframes pulse 
{
  50% { opacity: 1; }
}

.loadingText
{
    margin-top: 10px;
    color: #999;
}
</style>

Can anyone help us with this issue?
(I am quite new to Nuxt/Vue, please have mercy :) )