vue3 写一个loading组件

以下是一个简单的loading组件示例，使用Vue3的Composition API编写：

<template>
  <div v-if="loading" class="loading">
    <div class="loading-icon"></div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const loading = ref(false)

    return {
      loading
    }
  }
}
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-top-color: #2c3e50;
  animation: loading 0.8s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>

该组件使用了一个loading变量来控制是否显示loading组件，当loading为true时，显示loading组件，否则隐藏。在该示例中，loading组件是一个带有动画的圆圈，用CSS实现，可以根据需要自定义样式