loading.otp.html

<style>
.loading{
	position:fixed;
	z-index:200;
	width:100%;
	height:100%;
	top:0;
	left:0;
	margin:0 auto;
	background-color:#494949;
}

@keyframes loadin{
   0% {
     opacity:0;
   }
   100%{
     z-index:200;
     opacity:1;
   }
}
@keyframes loadout{
   0% {
     opacity:1;
   }
   100%{
     z-index:-1;
     opacity:0;
   }
}
@keyframes jumping{
   0% {
	 transform:translate(-50%,-50%);
	 animation-timing-function: ease-out;
   }
   20%{
	 transform:translate(-50%,-100%) scaleX(80%);
	 animation-timing-function: linear;
   }
   50%{
	 transform:translate(-50%,-135%) scaleX(100%);
	 animation-timing-function: linear;
   }
   55%{
	 transform:translate(-50%,-140%) scaleX(103%);
	 animation-timing-function: linear;
   }
   70%{
	 transform:translate(-50%,-135%) scaleX(95%);
	 animation-timing-function: linear;
   }
   80%{
	 transform:translate(-50%,-115%);
	 animation-timing-function: ease-in;
   }
   90%{
	 transform:translate(-50%,-50%);
	 animation-timing-function: ease-out;
   }
   95%{
	 transform:translate(-50%,-50%) scale(110%,80%);
	 animation-timing-function: ease-in;
   }
   100%{
	 transform:translate(-50%,-50%);
   }
}
.dot{
	position:fixed;
	margin:0 auto;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display: block;
	width:1.8em;
	height:1.8em;
	background-color:#fff;
	border-radius:50%;
	animation:jumping 1s ease infinite;
}

.loadshow{
    animation:loadin 0.2s ease forwards;
}
.loadhide{
    animation:loadout 0.2s ease forwards;
}
</style>
<div class='loading' id='loading'><span class="dot"></span></div> 
<loadset style='display:none'>
{
	"animations": {
		"in": {
			"id:loading": "loadshow"
		},
		"out": {
			"id:loading": "loadhide"
		}
	},
	"listening":"id:loading"
}
</loadset>