uniAppXCX/component/Mloading.vue

<template>
  <view class="loading">
    <view class="loadingIcon">
      <uni-icons type="spinner-cycle" size="30"></uni-icons>
    </view>
    <view class="text">
      {{ text }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.loading {
  // width: 100%;
  // height: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.text {
  display: inline-block;
  font-size: 12px;
  color: #9999;
}
.loadingIcon {
  display: inline-block;
  transform: rotate(45deg);
  animation: rotation 4s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

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