vue2.0 仿手机新闻站（五）全局的 loading 组件

1.组件结构

index.js

const LoadingComponent = require('./Loading.vue')
const loading = {
  install: function(Vue) {
    Vue.component('loading', LoadingComponent)
  }
}
module.exports = loading;

Loading.vue

<template>
    <div class="zns-loading">
    	<div class="zns-loading-inner">
	    	<div class="ball-spin-fade-loader">
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		      <div></div>
		    </div>
	    </div>
    </div>
</template>
<style scoped>
	.zns-loading{
		position: fixed;
		z-index: 1000;
		width:100%;
		height:90px;
	}
	.zns-loading-inner{
		display:flex;
	    display: flex;
	    height: 100px;
	    align-items: center;
	    justify-content: center;
	}
	@-webkit-keyframes ball-spin-fade-loader {
	  50% {
	    opacity: 0.3;
	    -webkit-transform: scale(0.4);
	            transform: scale(0.4); }

	  100% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	            transform: scale(1); } }

	@keyframes ball-spin-fade-loader {
	  50% {
	    opacity: 0.3;
	    -webkit-transform: scale(0.4);
	            transform: scale(0.4); }

	  100% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	            transform: scale(1); } }

	.ball-spin-fade-loader {
	  position: relative; }
	  .ball-spin-fade-loader > div:nth-child(1) {
	    top: 25px;
	    left: 0;
	    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
	            animation: ball-spin-fade-loader 1s 0s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(2) {
	    top: 17.04545px;
	    left: 17.04545px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(3) {
	    top: 0;
	    left: 25px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(4) {
	    top: -17.04545px;
	    left: 17.04545px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(5) {
	    top: -25px;
	    left: 0;
	    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(6) {
	    top: -17.04545px;
	    left: -17.04545px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(7) {
	    top: 0;
	    left: -25px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
	  .ball-spin-fade-loader > div:nth-child(8) {
	    top: 17.04545px;
	    left: -17.04545px;
	    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
	            animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
	  .ball-spin-fade-loader > div {
	    background-color: #5477b2;
	    width: 15px;
	    height: 15px;
	    border-radius: 100%;
	    margin: 2px;
	    -webkit-animation-fill-mode: both;
	            animation-fill-mode: both;
	    position: absolute; }
</style>

2.全局引用 loading 组件

main.js

3.引用

App.vue

4.效果图

当 loading 为 true 时