初始化仓库

utils/loding/loding.vue

@@ -0,0 +1,94 @@
+<template>
+	<div class="ring">
+		加载中
+	<span></span>
+</div>
+</template>
+
+<script>
+</script>
+
+<style>
+	body{
+	  margin:0;
+	  padding:0;
+	  background:#262626;
+	  font-family:sans-serif;
+	  font-size:20px;
+	}
+	
+	.ring{
+	  position:absolute;
+	  top:50%;
+	  left:50%;
+	  transform:translate(-50%, -50%);
+	  width:150px;
+	  height:150px;
+	  border:3px solid #3d3d3d;
+	  border-radius:50%;
+	  text-align:center;
+	  line-height:150px;
+	  letter-spacing:4px;
+	  text-transform:uppercase;
+	  color:#fff000;
+	  text-shadow:0 0 15px #fff000;
+	  box-shadow:0 0 20px rgba(0,0,0,.5);
+	}
+	.ring:before{
+	  content:'';
+	  display:block;
+	  position:absolute;
+	  top:-3px;
+	  left:-3px;
+	  width:100%;
+	  height:100%;
+	  border:3px solid transparent;
+	  border-top:3px solid #fff000;
+	  border-left:3px solid transparent;
+	  border-right:3px solid #fff000;
+	  border-radius:50%;
+	  animation:ani-cyle  2s linear infinite;
+	}
+	span{
+	  position:absolute;
+	  width:50%;
+	  height:4px;
+	  display:block;
+	  top:calc(50% - 2px);
+	  left:50%;
+	  background:none;
+	  animation:animate 2s linear infinite;
+	  transform-origin:left;
+	}
+	span:after{
+	  content:'';
+	  width:16px;
+	  height:16px;
+	  background:#fff000;
+	  border-radius:50%;
+	  box-shadow: 0 0 20px #fff000;
+	  position:absolute;
+	  right:-8px;
+	  top:calc(50% - 8px);
+	}
+	
+	@keyframes ani-cyle{
+	  0%{
+	    transform:rotate(0deg);
+	  }
+	  100%{
+	    transform:rotate(360deg);
+	  }
+	  
+	}
+	
+	@keyframes animate{
+	  0%{
+	    transform:rotate(45deg);
+	  }
+	  100%{
+	    transform:rotate(405deg);
+	  }
+	  
+	}
+</style>