vue手写加载动画项目

在页面没有响应时，展示加载动画是一种对用户友好的表现，不至于白屏，等响应内容渲染到页面时再移除动画

先放loading效果图

原理：伪类+动画，下面是步骤图，贴上助于理解，加载动画本质是设置一个定宽定高的正方形，border-radius: 50%;使其成为圆形，再给该div3px的边框并设为透明，然后在单独设置上边框为白色，用::before，::after伪类absolute定位并进行同样设置，不同之处是依次增大留出的间隙，以及动画执行时间变长和设置延迟，这样就能形成圆圈不同快慢的旋转

完整代码：

components文件夹下loading.vue

在cs.vue页面中引入并注册loading

cs.vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。