www/src/layouts/partials/preloader.html
2023-01-19 14:22:55 -05:00

61 lines
1 KiB
HTML

<div class="preloader">
<div class="loading">
<p class="teal">Loading...</p>
</div>
</div>
<style>
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #1a1a1a;
z-index: 9999;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: #333;
}
.loading:after {
content: "";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
window.onload = function() {
var preloader = document.querySelector(".preloader");
preloader.style.opacity = "0";
setTimeout(function(){
preloader.style.display = "none";
}, 1000);
}
</script>