本文介绍如何在Vue项目中利用axios拦截器实现数据加载时的loading动画效果。首先创建一个loading.vue组件，定义加载动画样式，然后在Vuex中设置一个状态来控制loading组件的显示和隐藏。通过在axios的请求和响应拦截器中改变这个状态，实现在发送请求时显示loading，接收到响应后隐藏loading。
首先新建一个 loading.vue组件，写loading动画效果
.loader {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
@-webkit-keyframes loading{
50% {
transform: scale(.4);
opacity: .3
}
100% {
transform: scale(1);
opacity: 1
}
}
.loading{
position: relative
}
.loading span {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #333;
position: absolute
}
.loading span:nth-of-type(1) {
top: 25px;
left: 0;
-webkit-animation: loading-3 1s ease 0s infinite
}
.loading span:nth-of-type(2) {
top: 17px;
left: 17px;
最低0.47元/天 解锁文章
扫一扫
3749
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
