1 四点加载

<style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>

App.vue

<div id="loading-mask">
  <div class="loading-wrapper">
     <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
  </div>
</div>

util.js

export function GlobalLoadingShow() {
  document.getElementById("loading-mask").style.display = "block";
}

export function GlobalLoadingHide() {
  document.getElementById("loading-mask").style.display = "none";
}

2 旋涡加载

同第一点

  <style>html,body,#app{height:100%;margin:0px;padding:0px;}.chromeframe{margin:0.2em 0;background:#ccc;color:#000;padding:0.2em 0;}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#FFF;-webkit-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-o-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001;}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#FFF;-webkit-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;-o-animation:spin 3s linear infinite;-ms-animation:spin 3s linear infinite;animation:spin 3s linear infinite;}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#FFF;-moz-animation:spin 1.5s linear infinite;-o-animation:spin 1.5s linear infinite;-ms-animation:spin 1.5s linear infinite;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear 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 .loader-section{position:fixed;top:0;width:51%;height:100%;background:#1890ff;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}#loader-wrapper .loader-section.section-left{left:0;}#loader-wrapper .loader-section.section-right{right:0;}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all 0.7s 0.3s cubic-bezier(0.645,0.045,0.355,1.000);}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out;}.no-js #loader-wrapper{display:none;}.no-js h1{color:#222222;}#loader-wrapper .load_title{font-family:'Open Sans';color:#FFF;font-size:19px;width:100%;text-align:center;z-index:9999999999999;position:absolute;top:60%;opacity:1;line-height:30px;}#loader-wrapper .load_title span{font-weight:normal;font-style:italic;font-size:13px;color:#FFF;opacity:0.5;}</style>

App.vue

<div id="loader-wrapper">
  <div id="loader"></div>
	  <div class="loader-section section-left"></div>
	  <div class="loader-section section-right"></div>
	  <div class="load_title">正在加载,请耐心等待</div>
</div>

3 自定义封装

加载gif附件

例子：

loading.vue

<template>
  <div
    class="loadingBox"
    v-show="loading"
    style="background-color: rgba(0, 0, 0, 0.5)"
  >
    <div class="sun-loading"></div>
  </div>
</template>
<script>
export default {
  name: "loading",
  data() {
    return {
      loading: false,
    };
  },
  created() {
    var that = this;
    this.bus.$on("loading", function (data) {
      that.loading = !!data;
    });
  },
};
</script>
<style lang="less" scoped>
.sun-loading {
  width: 45px;
  height: 45px;
  display: block;
  animation: sunLoading 1s steps(12, end) infinite;
  background: transparent
    url("http://www.sucaijishi.com/uploadfile/2018/0919/20180919030731920.gif?imageMogr2/format/jpg/blur/1x0/quality/60");
  background-size: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
    <!--loading加载-->
    <Loading></Loading>
    <div style="height: 30px"></div>
  </div>
</template>
<script>
import Loading from "./components/loading.vue";//引用loading组件
export default {
  components: {
    Loading,
  },
};
</script>

main.js

Vue.prototype.bus = new Vue();

使用

//获取列表数据
getList() {
	// 显示loading
	this.bus.$emit("loading", true);
  
	//请求接口
	xxx().then((res) => {
  		// ...
		// 关闭loading
		this.bus.$emit("loading", false);
	});
},

4 elementUI

//获取列表数据
getList() {
	// 开始加载loading
	let loading = this.$loading({
		lock: true, //lock的修改符--默认是false
		text: "拼命加载中，请稍候...", //显示在加载图标下方的加载文案
		background: "rgba(0,0,0,0.8)", //遮罩层颜色
		spinner: "el-icon-loading", //自定义加载图标类名
	});
	//请求接口
	xxx().then((res) => {
		// ...
		//关闭loading
		loading.close();
	});
},

Breeze Blog

vue 加载动画

1 四点加载

2 旋涡加载

3 自定义封装

4 elementUI