JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body onload="zarnukdsa()">
	<h1>Привет</h1>
	<div id="Sarnukansuv">
		<div></div>
	</div>
</body>

CSS

@charset "utf8";
*,*:after,*:before,html{box-sizing:border-box}
body{margin:0;padding:0}
h1{
	font-family:font-family:Tahoma,Geneva,sans-serif;
	font-style:normal;
	font-weight:700;
	font-size:29px
	}
h1,#Sarnukansuv>div{
	top:47%;
	left:47%;
	display:block;
	position:absolute;
	transform:translate(-47%,-47%)
	}
#Sarnukansuv{
	background:#000;
	width:99%;
	height:99%;
	display:block;
	position:absolute;
	z-index:999
	}
#Sarnukansuv>div{width:199px;height:199px}
#Sarnukansuv>div:before,#Sarnukansuv>div:after{
	content:"";
	display:block;
	position:absolute;
	border-radius:71%;
	border:4px solid #d2710a;
	border-top-color:#244298
	}

#Sarnukansuv>div:before{width:100%;height:100%;animation:zarnukdsa 5s linear infinite}
#Sarnukansuv>div:after{
	width:148px;
	height:148px;
	top:25px;
	left:25px;
	animation:zarnukdsa 5s linear infinite reverse
	}
@keyframes zarnukdsa{
	from{transform:rotate(0deg)}
	to{transform:rotate(360deg)}
	}

JavaScript

function loader(){
   loader = setTimeout(showPage, 36000)
}
function showPage(){
   document.getElementById("Loading").style.display = "none"
}