myvtm/addin/res/ManagerDesktop/css/loading.css

#loadContent{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  display: none;
}
#loadContent .back_cover{
  width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background:rgba(255, 255, 255, 0.5);
}
.loading{
  width: 40px;
  height: 40px;
  /* margin: 50px auto; */
  position: absolute;
  left: 50%;
  top: 45%;
}

.loading .circle{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.circle  span{ 
  width: 10px;
  height: 10px;
  display: inline-block;
  background: #527fff;
  border-radius: 100%;
  position: absolute;
  animation: loadingCircle 1.2s infinite ease-in-out;
  animation-fill-mode:both;
}

.circle  span:nth-child(1){ 
  top: 0;
  left: 0;
}
.circle  span:nth-child(2){ 
  top: 0;
  right: 0;
}
.circle  span:nth-child(3){ 
  right: 0;
  bottom: 0;
}
.circle  span:nth-child(4){ 
  left: 0;
  bottom: 0;
}


.loading .circle2{
  transform: rotateZ(45deg);
}
.circle2 span:nth-child(1){ 
  animation-delay: -1.01s
}
.circle2 span:nth-child(2){ 
  animation-delay: -0.8s
}
.circle2 span:nth-child(3){ 
  animation-delay: -0.7s
}
.circle2 span:nth-child(4){ 
  animation-delay: -0.2s
}


.loading .circle3{
  transform: rotateZ(90deg);
}
.circle3 span:nth-child(1){ 
  animation-delay: -1.0s
}
.circle3 span:nth-child(2){ 
  animation-delay: -0.7s
}
.circle3 span:nth-child(3){ 
  animation-delay: -0.4s
}
.circle3 span:nth-child(4){ 
  animation-delay: -0.1s
}

.circle1 span:nth-child(2){ 
  animation-delay: -0.9s
}
.circle1 span:nth-child(3){ 
  animation-delay: -0.6s
}
.circle1 span:nth-child(4){ 
  animation-delay: -0.3s
}

@keyframes loadingCircle {
  0%{transform: scale(0.0);}
  40%{transform: scale(1.0);}
  80%{transform: scale(0.0);}
  100%{transform: scale(0.0);}
}


/* loading菊花旋转 */
#loading_mask {
	width: 100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  display: none;
}
.loading_wrapper{
  background: rgba(0, 0, 0, 0.7);
	width: 560px;
	height: 310px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border-radius: 10px;
}
.loading_icon_wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading_title{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  color: #ffffff;
  font-size: 36px;
  line-height: 54px;
}
.loading_icon{
  height: 72px;
  width: 72px;
  display: inline-block;
  position: relative;
  margin-top: 60px;
}
.loading_point{
  width: 6px;
  height: 6px;
  border-radius: 12px;
  background: #FFFFFF;
  margin-right: 4px;
}
#circle-center {
  background: rgb(75 75 75);
  position: absolute;
  top: 19px;
  left: 19px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
}
.load-line {
	position: absolute;
  top: 34px;
  left: 0px;
  width: 72px;
  height: 6px;
}
.load-line > span {
	display: inline-block;
  width: 50%;
  height: 100%;
  border-radius: 3px;
  background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}