Loading
1、样式如图:
2、在 src/components/shared
里面新建 Loading.vue
组件,里面添加如下代码:
<template>
<div class="loading">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</template>
<style>
.loading {
width: 60px;
height: 60px;
margin: 0 auto;
margin-top: 100px;
position: relative;
-webkit-animation: load 3s linear infinite;
}
.loading div {
width: 100%;
height: 100%;
position: absolute;
}
.loading span {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FF6666;
position: absolute;
left: 50%;
margin-top: -10px;
margin-left: -10px;
-webkit-animation: changeBgColor 3s ease infinite;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
}
33.3% {
-webkit-transform: rotate(120deg);
}
66.6% {
-webkit-transform: rotate(240deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes changeBgColor {
0%, 100% {
background: #99CC66;
}
33.3% {
background: #FFFF66;
}
66.6% {
background: #FF6666;
}
}
.loading div:nth-child(2) {
-webkit-transform: rotate(120deg);
}
.loading div:nth-child(3) {
-webkit-transform: rotate(240deg);
}
.loading div:nth-child(2) span {
-webkit-animation-delay: 1s;
}
.loading div:nth-child(3) span {
-webkit-animation-delay: 2s;
}
</style>
3、在 main.js
中,全局注册该组件
.
.
import Loading from "./components/shared/Loading";
Vue.component("Loading", Loading);
.
.
4、在views/Home.vue
中,添加如下代码:
<template>
<div id="wrapper">
<Loading v-if="loading