vue系列自定义加载页

<template>
  <div class="loading" :class="[date?'':'vanish']">
    <div class="loadOne load">
      <div class="circle-loader">
        <div class="circle-line">
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
          <div class="circle circle-blue"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
          <div class="circle circle-yellow"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
          <div class="circle circle-red"></div>
        </div>
        <div class="circle-line">
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
          <div class="circle circle-green"></div>
        </div>
      </div>
    </div>
    <button class="btn open" @click="enter">进入</button>
  </div>
</template>
<script>
export default {
  name:"Loading",
  data(){
    return{
      date:true
    }
  },
  methods:{
    enter(){
      this.date = false
    }
  }
}
</script>
<style lang="stylus" scoped>
.loading{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:orange;
  font-family: 'Roboto', sans-serif;
  background-color: #FFD399;
  .load{
    position:absolute;
    top:140px;left:0;right:0;
    margin:auto;
  }
  .loadOne{
    left:16px;
  @-webkit-keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes rotate-animation {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@-webkit-keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	@-webkit-keyframes move-animation {
	 0%{
		 -webkit-transform: translate(0,0);
		 transform: translate(0,0);
	 }
	 }
	@keyframes move-animation {
		0% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
		25% {
			-webkit-transform: translate(-64px, 0);
			transform: translate(-64px, 0);
		}
		75% {
			-webkit-transform: translate(32px, 0);
			transform: translate(32px, 0);
		}
		100% {
			-webkit-transform: translate(0, 0);
			transform: translate(0, 0);
		}
	}
	body {
		background-color: #F5F5F5;
	}

	.circle-loader {
		display: block;
		width: 64px;
		height: 64px;
		margin-left: -32px;
		margin-top: -32px;
		position: absolute;
		left: 50%;
		top: 50%;
		-webkit-transform-origin: 16px 16px;
		transform-origin: 16px 16px;
		-webkit-animation: rotate-animation 5s infinite;
		animation: rotate-animation 5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
	}
	.circle-loader .circle {
		-webkit-animation: move-animation 2.5s infinite;
		animation: move-animation 2.5s infinite;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.circle-loader .circle-line {
		width: 64px;
		height: 24px;
		position: absolute;
		top: 4px;
		left: 0;
		-webkit-transform-origin: 4px 4px;
		transform-origin: 4px 4px;
	}
	.circle-loader .circle-line:nth-child(0) {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.circle-loader .circle-line:nth-child(1) {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.circle-loader .circle-line:nth-child(2) {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.circle-loader .circle-line:nth-child(3) {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
	}
	.circle-loader .circle-line .circle:nth-child(1) {
		width: 8px;
		height: 8px;
		top: 50%;
		left: 50%;
		margin-top: -4px;
		margin-left: -4px;
		border-radius: 4px;
		-webkit-animation-delay: -0.3s;
		animation-delay: -0.3s;
	}
	.circle-loader .circle-line .circle:nth-child(2) {
		width: 16px;
		height: 16px;
		top: 50%;
		left: 50%;
		margin-top: -8px;
		margin-left: -8px;
		border-radius: 8px;
		-webkit-animation-delay: -0.6s;
		animation-delay: -0.6s;
	}
	.circle-loader .circle-line .circle:nth-child(3) {
		width: 24px;
		height: 24px;
		top: 50%;
		left: 50%;
		margin-top: -12px;
		margin-left: -12px;
		border-radius: 12px;
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}
	.circle-loader .circle-blue {
		background-color: #1f4e5a;
	}
	.circle-loader .circle-red {
		background-color: #ff5955;
	}
	.circle-loader .circle-yellow {
		background-color: #ffb265;
	}
	.circle-loader .circle-green {
		background-color: #00a691;
	}
  }

  .btn{
    position:absolute;
    left:0; right:0;
    margin:auto;
    width:140px;
    height:46px;
  }
  .open{
    bottom:120px;
  }
}
@keyframes loadtime{
  from{opacity:1}
  to{opacity:0}
}
.vanish{
  animation:loadtime .7s forwards;
}
</style>