Vuejs -如何添加多个加载指示器(微调器)，以使彼此具有不同的状态？

<template>
  <div class="loader">
    <!-- 根据状态显示不同的加载动画 -->
    <div v-if="status === 'loading'" class="spinner"></div>
    <div v-else-if="status === 'success'" class="checkmark"></div>
    <div v-else-if="status === 'error'" class="cross"></div>
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      default: 'loading', // 默认状态为加载中
      validator: function (value) {
        return ['loading', 'success', 'error'].includes(value);
      }
    }
  }
}
</script>

<style>
.loader {
  /* 样式代码 */
}
.spinner {
  /* 加载动画样式 */
}
.checkmark {
  /* 成功状态样式 */
}
.cross {
  /* 错误状态样式 */
}
</style>

<template>
  <div>
    <Loader status="loading" />
    <Loader status="success" />
    <Loader status="error" />
  </div>
</template>

<script>
import Loader from './Loader.vue';

export default {
  components: {
    Loader
  }
}
</script>