VUE简单的loading动画设置

main.js：

这里是用了vuex做了个管理

axios.interceptors.request.use(function(config){
  store.commit('loadingFalg',true)//在请求发出之前进行一些操作
  return config
})
axios.interceptors.response.use(function(config){
  store.commit('loadingFalg',false)//在这里对返回的数据进行处理
  return config
})

调用的页面

script：
这里做了一个懒加载的引入

const Loading = () => import("../../components/loading/loading.vue");

components：

  components: {
    Loading
  },

computed：——取出vuex的值

  computed: {
    ...mapState(["loadingFalg"])
  },

template：页面结构

<Loading v-if="loadingFalg"></Loading>

loading的template：

<template>
  <div id="loading">
    <div class="balls">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>

#loading{
  
  width: 100%;
  height: 100%;
}
.balls {
  height: 100%;
  margin: auto;
  width: 4em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}

.balls div {
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #0096ff;
}

.balls div:nth-of-type(1) {
  transform: translateX(-100%);
  animation: left-swing 0.5s ease-in alternate infinite;
}

.balls div:nth-of-type(3) {
  transform: translateX(-95%);
  animation: right-swing 0.5s ease-out alternate infinite;
}

@keyframes left-swing {
  50%,
  100% {
    transform: translateX(95%);
  }
}

@keyframes right-swing {
  50% {
    transform: translateX(-95%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>