Initial website preloader

This commit is contained in:
Thomas Smith 2023-01-19 14:22:55 -05:00
parent ef74d4fc00
commit 8fb30a1957
2 changed files with 63 additions and 0 deletions

View file

@ -105,6 +105,8 @@
}
</script>
{{- partial "preloader.html" -}}
{{- partial "auth-data-snippet.html" -}}
{{- partial "toast.html" -}}

View file

@ -0,0 +1,61 @@
<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>