Progress
Pre Loader Örneği
#Yukleyici {
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
z-index: 100000;
background-color: black;
overflow: hidden;
display: flex;
justify-content: center;
opacity: .7;
transition: opacity 0.5s ease;
}
#Cubuk {
margin-top: 40%;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<div id="Yukleyici">
<progress id="Cubuk" max="100" value="0"></progress>
<script>
const start = Date.now();
const Sayac = setInterval(() => {
const seconds = ((Date.now() - start) / 200).toFixed(1);
//console.log(seconds + " sn geçti");
document.querySelector("#Cubuk").value = seconds;
}, 1000);
window.addEventListener("load", () => {
clearTimeout(Sayac);
document.querySelector("#Yukleyici").style.cssText = "opacity:0;";
});
</script>
</div>
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
z-index: 100000;
background-color: black;
overflow: hidden;
display: flex;
justify-content: center;
opacity: .7;
transition: opacity 0.5s ease;
}
#Cubuk {
margin-top: 40%;
transition: transform 0.5s ease;
}
</style>
</head>
<body>
<div id="Yukleyici">
<progress id="Cubuk" max="100" value="0"></progress>
<script>
const start = Date.now();
const Sayac = setInterval(() => {
const seconds = ((Date.now() - start) / 200).toFixed(1);
//console.log(seconds + " sn geçti");
document.querySelector("#Cubuk").value = seconds;
}, 1000);
window.addEventListener("load", () => {
clearTimeout(Sayac);
document.querySelector("#Yukleyici").style.cssText = "opacity:0;";
});
</script>
</div>
