Loading Spinner Yapımı - HTML5 - CSS3 - Ders14
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<body onload="hideloader()">
<h1>Loading...</h1>
<div id="loading"></div>
</body>
</head>
</html>
CSS İÇERİĞİ:
h1{
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: auto;
color: #ff6a00;
font-family: arial;
font-size: 9px;
}
#loading{
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #ff6a00;
border-bottom-color: blue;
border-radius: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
animation: anime 1s linear infinite;
}
@keyframes anime{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
JAVASCRİPT İÇERİĞİ:
function hideloader(){
document.getElementById("loading").style.display = "none";
}
Yorumlar
Yorum Gönder