ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 22:35:06 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed loading screen animations and icon

Browse source
This commit is contained in:
Thomas Smith 2023-01-20 12:31:02 -05:00
parent 706e7e2d01
commit 1871627b18
1 changed files with 31 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/layouts/partials/preloader.html
View file

@ -1,63 +1,50 @@
<div class="preloader"> <div id="preloader">
<div class="loading"> <div id="status">
<p class="teal">steeping</p> <i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead"></i>
<div id="loading-text"><p class="grid-gray">steeping...</p></div>
</div> </div>
</div> </div>
<style> <style>
.tea-icon{
.preloader { display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
#preloader {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #1a1a1a; background: #1a1a1a;
z-index: 9999; z-index: 9999;
} }
#status {
.loading { width: 200px;
height: 200px;
position: absolute; position: absolute;
top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); top: 50%;
font-size: 30px; background-position: center;
color: #333; margin: -100px 0 0 -100px;
} }
#loading-text {
.loading:before { font-size: 20px;
content: ""; text-align: center;
display: block; margin-top: 10px;
width: 32px; animation: pulse 1s infinite;
height: 32px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
border-radius: 50%;
border: 2px solid #00ffd0;
border-color: #fff transparent #00ffd0 transparent;
animation: lds-dual-ring 1.2s linear infinite;
} }
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style> </style>
<script> <script>
$(window).on('load', function() {
window.onload = function() { $('#status').fadeOut();
var preloader = document.querySelector(".preloader"); $('#preloader').delay(350).fadeOut('slow');
preloader.style.opacity = "0"; });
setTimeout(function(){
preloader.style.display = "none";
}, 1000);
}
</script> </script>