vue 编写全局loading加载动画效果

加粗1.loading组件样式

<template><transition name="fade"><section><div class="loading"><!-- <img width="24px" height="24px" src="../images/timg.gif"><p class="desc">{{title}}</p> --><span></span><span></span><span></span><span></span><span></span></div></section></transition>
</template>
<script>
export default {props: {title: {type: String,default: '正在载入...'}}
}
</script>
<style scoped lang="css">
.fade-enter-active, .fade-leave-active {transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {opacity: 0;
}
section {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.3);z-index: 999;display: flex;align-items: center;justify-content: center;
}
.loading {width: 100%;text-align: center;/* flex-direction: column; */
}
.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1s ease infinite;margin-left: 5px;
}
@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 70px;margin: -15px 0;background: lightblue;}
}
.loading span:nth-child(2){-webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){-webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){-webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){-webkit-animation-delay:0.8s;
}
</style>

2.在loading.vue同级下创建一个loading.js

import loading from './loading.vue';const Loading = {install:function(Vue) {Vue.component('Loading', loading)}
}export default Loading;

3.在main.js注册

import Vue from 'vue'
import loading from './components/loading'
Vue.use(loading)

4.在组件中使用封装好的loading组件

<loading v-if="hide"></loading>

vue 编写全局loading加载动画效果相关推荐

【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
iframe 标签(用于嵌套网页)及loading加载动画效果
一. 什么是 iframe 1. iframe 是 HTML元素,用于在网页中内嵌另外一个网页. 2. iframe 默认有一个宽高,存在边界. 3. iframe 是一个行内块级元素,可以通过 di ...
[每天进步一点点~] uni-app css 实现 10种 loading加载动画效果
第一种效果图: 检测动画.gif 需要准备一张下面的底图,因为我写不出这种分成无数线段的圆... 加载loading底图.png 代码: <template><view class ...
vue自定义全局loading加载组件
1.实现效果 2.实现原理 Vue.extend:extend 创建的是 Vue 构造器,可通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上. vu ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
elemen-ui官方使用 <el-tablev-loading="loading"element-loading-text="拼命加载中"element ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
Vue在请求(axios)里面实现loading加载动画
1.在main.js里引入axios import axios from "@/http/index.js" 2.在vuex中设置状态 state: {isLoading: fal ...

vue 编写全局loading加载动画效果

vue 编写全局loading加载动画效果相关推荐

最新文章

热门文章