Minor loader fixes

z-index в последнем коммите оставался поверх всего, исправил наложение
This commit is contained in:
Degradin 2025-03-05 16:23:09 +03:00
parent b588577e4f
commit 82306b76dd
2 changed files with 24 additions and 21 deletions

View File

@ -1,20 +1,19 @@
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Document</title> <title>CampFire ID</title>
<link rel="stylesheet" href="./styles/main.css"> <link rel="stylesheet" href="./styles/main.css">
</head> </head>
<body> <body>
<div class="containerloader"> <div class="containerloader" id="loader">
<div class="block"> <div class="block">
<span class="loader"></span> <span class="loader"></span>
</div>
</div> </div>
</div>
<main class="maincontainer"> <main class="maincontainer">
<div class="userprofile"> <div class="userprofile">
<div class="userprofile_left"> <div class="userprofile_left">
<img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image"> <img src="Images/Screenshot 2023-09-01 135601.png" alt="Picture" class="userprofile_left_image">
@ -40,8 +39,11 @@
<img src="Images/Campfire.png" alt="none" class="achievement_image"> <img src="Images/Campfire.png" alt="none" class="achievement_image">
<p class="achievement_name">Ачивка</p> <p class="achievement_name">Ачивка</p>
</div> </div>
</div> </div>
</main> </main>
<!--connect backend-->
<script src="../backend/main.js"></script>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</body> </body>
</html> </html>

View File

@ -150,13 +150,14 @@ body {
} }
.containerloader { .containerloader {
background-color: var(--black); position: fixed;
z-index: 10 !important; top: 0;
position: absolute; left: 0;
width: 120%; width: 100%;
height: 120%; height: 100%;
opacity: 100%; background-color: var(--black);
transform: translate(-8%, -21%); z-index: 100;
opacity: 1;
padding: 35%; padding: 35%;
animation: loadscreen 1s 1 normal forwards; animation: loadscreen 1s 1 normal forwards;
@ -200,15 +201,15 @@ body {
@keyframes loadscreen { @keyframes loadscreen {
0% { 0% {
z-index: 1; z-index: 100;
opacity: 100%; opacity: 1;
} }
80% { 80% {
z-index: 1; z-index: 100;
opacity: 100%; opacity: 1;
} }
100% { 100% {
opacity: 0%; opacity: 0;
z-index: -1 z-index: -1
} }
} }