خودتان امتحان کنید

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>بیاموز-پروژه محور</title>
<style>
body{
	background-color:#f9f9f9;
}
#loader-wrapper
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#loader
{
	display:block;
	position:relative;
	left:50%;
	top:50%;
	width:150px;
	height:150px;
	margin:-75px 0 0 -75px;
	border-radius:50%;
	border:3px solid transparent;
	border-top-color:#3498DB;
	animation:spin 1.5s ease-in-out  infinite;
	-webkit-animation:spin 1.5s ease-in-out  infinite;
	-ms-animation:spin 1.5s ease-in-out  infinite;
}
#loader:before{
   content:'';
	position:absolute;
	top:5px;
	left:5px;
	bottom:5px;
	right:5px;
	border-radius:50%;
	border:3px solid transparent;
	border-bottom-color:#E74C3C;
	
	animation:spin 1.5s ease-in-out  infinite;
	-webkit-animation:spin 1.5s ease-in-out  infinite;
	-ms-animation:spin 1.5s ease-in-out  infinite;
}

#loader:after{
   content:'';
	position:absolute;
	top:15px;
	left:15px;
	bottom:15px;
	right:15px;
	border-radius:50%;
	border:3px solid transparent;
	border-bottom-color:#F9C909;
	
	animation:spin 1.5s ease-in-out  infinite;
	-webkit-animation:spin 1.5s ease-in-out  infinite;
	-ms-animation:spin 1.5s ease-in-out  infinite;
}
@keyframes spin
{
	0%{
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-o-transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-o-transform:rotate(360deg);
	}
}

@-webkit-keyframes spin
{
	0%{
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-o-transform:rotate(0deg);
	}
	100%
	{
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
		-ms-transform:rotate(360deg);
		-o-transform:rotate(360deg);
	}
}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function(e) {
    $("#loader").animate(
	{
		top:-2000
		},1500);
		
		$(".loader-wrapper").css('display','none');
});

</script>
</head>
<body>
<div id="loader-wrapper">
    <div id="loader"></div>
</div>

<div style="direction:rtl;">در این تمرین همان طور که مشاهده کردید قبل از اینکه سایت لود شود با آیکن منتظر بمانید مواجه می شوید، بنابراین برای مشاهده مجدد افکت، صفحه را رفرش نمایید.</div>
</body>
</html>

Report a Problem: