vue手写加载动画项目
在页面没有响应时,展示加载动画是一种对用户友好的表现,不至于白屏,等响应内容渲染到页面时再移除动画
先放loading效果图
文章图片
原理:伪类+动画,下面是步骤图,贴上助于理解,加载动画本质是设置一个定宽定高的正方形,border-radius: 50%;
使其成为圆形,再给该div3px的边框并设为透明,然后在单独设置上边框为白色,用::before,::after伪类absolute定位并进行同样设置,不同之处是依次增大留出的间隙,以及动画执行时间变长和设置延迟,这样就能形成圆圈不同快慢的旋转
文章图片
文章图片
完整代码:
components文件夹下loading.vue
正在加载,请稍等......#loader_wrapper{position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: rgba(0, 0, 0,.8); background-size: 100% 100%; }#loader{display: block; position: relative; left: 50%; top: 50%; width: 300px; height: 300px; /* background: red; */margin: -150px 0 0 -150px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 5s linear infinite; -ms-animation: spin 5s linear infinite; -moz-animation: spin 5s linear infinite; -o-animation : spin 5s linear infinite; animation:spin 5s linear infinite; z-index: 1001; }#loader:before{content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; /* background: green; */border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 8s linear infinite; -ms-animation: spin 8s linear infinite; -moz-animation: spin 8s linear infinite; -o-animation : spin 8s linear infinite; animation:spin 8s linear infinite; }#loader:after{content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; /* background: yellow; */border: 3px solid transparent; border-top-color: #fff; -webkit-animation: spin 8s linear 1s infinite; -ms-animation: spin 8s linear 1s infinite; -moz-animation: spin 8s linear 1s infinite; -o-animation : spin 8s linear 1s infinite; animation:spin 8s linear 1s infinite; }@-webkit-keyframes spin {0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform:rotate(0deg); }100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }} @keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform:rotate(0deg); }100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }}#loader_wrapper .load_title{font-family: "Open Sans"; color:#fff; font-size: .3rem; width: 100%; text-align: center; z-index: 9999; position: absolute; top: 70%; opacity: 1; line-height: .3rem; }
在cs.vue页面中引入并注册loading
cs.vue
111
【vue手写加载动画项目】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 使用composer自动加载类文件
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数()
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX(Vuex|VueX(Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show