以下是Nuxt.js源代码中默认loading indicators的集合。
基本上，您可以在nuxt.config.js中指定要用作loadingIndicator的HTML模板。

export default {
  ..., // Other Nuxt configuration

  // Simple usage:
  loadingIndicator: '~/custom-locading-indicator.html',

  // Or with dynamic configuration variables passed via lodash template syntax
  loadingIndicator: {
    name: '~/custom-locading-indicator.html',
    color: '#000',
    background: '#fff'
  }
}

注意，指示器可以访问

以下是您需要的：
您可以为应用创建组件。您可以阅读有关Nuxt Loading Here的信息

• 设置组件具有loading: <your-component-path>在这里阅读更多The loading indicator Property .
• 要将nuxt加载到您的页面上，您需要添加：

loadingIndicator: {
    name: 'chasing-dots',
    color: 'purple',
    background: 'green'
  }

下面是我如何在应用中配置组件的示例。

export default {

  // LoadingBar component
  loading: '~/path-to-your-loading-component/Loading.vue',
}

在您要加载的页面上，添加以下内容。

export default {
  /*
   ** programmatically start the loader so we force the page to take x2seconds to load
   */
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  }
}
</script>

Nuxt还提供了一个$loading组件，这样你就可以在应用的任何地方使用它，使用$nuxt.$loading.get()将返回当前的加载百分比。
例如：

<template>
  <div>
    <h1>Home page</h1>
    <div v-show="$nuxt.$loading.get() > 0">
      {{loadingIndicator}}%
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    loadingIndicator() {
      return this.$root.$loading.get()
    }
  }
}
</script>

在@femanso之后，我设法用window.$nuxt.$root.$loading.percent而不是$nuxt.$loading.get()定制了我的加载组件

computed: {
    loadingIndicator() {
      return  window.$nuxt.$root.$loading.percent
    }
  },

如果有人遇到这种情况，想从vue组件中获取当前的加载进度，可以使用以下代码：
编辑：它一直工作到我重新启动开发服务器，然后它停止工作。所以不确定这是否是一个可行的解决方案。

computed: {
    nuxtLoading() {
      return this.$nuxt.$loading.percent
    },
  },

使用Bootstrap 5微调器（https://v5.getbootstrap.com/docs/5.0/components/spinners/），模式：“通用”
在nuxt.config.js中
加载：“~/组件/加载.vue”
在组件中

<template>
  <div 
    v-if="isLoading"
    class="loader"
  >
    <div class="loader__spinner spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    start() {
      this.isLoading = true
    },
    finish() {
      this.isLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.loader {
  &__spinner {
    position: fixed;
    top: 10px;
    left: 10px;
  }
}
</style>

https://nuxtjs.org/guides/configuration-glossary/configuration-loadinghttps://codesandbox.io/s/github/nuxt/nuxt.js/tree/dev/examples/custom-loading?from-embed=&file=/components/loading.vue