<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>