left: 0 ; top: 0 ; background: url ( '~@/images/loading.svg' ) center center no-repeat # fff ; width: 100 vw ; height: 100 vh ; z-index: 1000 ; < / style >

全局CSS

.fade-enter,
.fade-leave-active {
  opacity: 0;
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
                <transition name="fade">
                    <loading v-if="isLoading"></loading>
                </transition>
           </div>
                    vue动画过渡转载&lt;template&gt;      &lt;div class="loading"&gt;&lt;/div&gt;&lt;/template&gt; &lt;script&gt;export default {  name: 'Loading' }&lt;/script&gt; &lt;style scoped&gt;.loading {  ...
				
原文链接:https://blog.csdn.net/sunhuaqiang1/article/details/95474410
使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。
//全局loading
<template>
    <div v-loading="loading"> </div>
</template>
在data 中定义初始化， loading: false，同时在mounted()中将 this.
  <div class="about">
    <button @click="loading=!loading">改变状态</button>
    <div class="test" v-loading="loading">
      我是test
首先，我设置一个没什么用的div，然后让它的高度和宽度正好盖住页面；
然后，将v-loading的事件放在这个div上，将div的设为position: absolute，这样不占用空间，不影响页面其他布局
注意，高度要动态获取，不然换一个显示器，就不能刚好完.
这是我的页面js引入
因为我用到了ES语法所以也要转换所以引入了ES6
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/
	mounted() {//可以在这里面直接进行滚动条的获取
		window.addEventListener('scroll', this.getTopHeight , true)
	methods: {
		getTopHeight () {
		//方法...
:black_medium-small_square: 项目搭建
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容入之前的一篇文章一样
progressbar组件工作目录
:black_medium-small_square: progressbar源文件之template
progressbar组件表现为.vue文件的形式，其中template部分内容如下
progressbar源文件template部分
我们可以分析一下，progressbar组件主要有这几项属性：
  类型，利用type变量