vue 스피너

components > common > LoadingSpinner.vue

 

<template>
<div class="spinner-container">
<div class="spinner" />
</div>
</template>

<script>
export default {};
</script>

<style scoped>
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
height: 240px;
}
.spinner {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #e0e0e0;
border-bottom: 5px solid #fe9616;
animation: spin 1s linear infinite;
position: relative;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

 

 

 

등록할 페이지에서

<template>

   <loading-spinner v-if="isLoading"></loading-spinner>

   <ul v-else>

   ........

   </ul>

</template>

 

<scirpt>

import LoadingSpinner from "@/components/common/LoadingSpinner.vue";

export default {

  components: { LoadingSpinner },

  data() {

    return {

      isLoading: false

    };

  },

methods:{

 async getDatas() {   

    this.isLoading = true;

    const { data } = await fecthLists();

    this.isLoading = false;

    this.getLists = data.posts;

    }

  }

}

 

 

</scirpt>