aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2025-12-17 06:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: added App loading splash screen

Browse Source
This commit is contained in:
MTG2000
2022-07-14 12:46:25 +03:00
parent 35f4ffe67a
commit 924a76a7ee
4 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

4
public/index.html
View File

@@ -10,6 +10,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/styles.css" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
@@ -44,6 +45,9 @@
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div class="loading-app">
<img src="%PUBLIC_URL%/assets/images/logo.png" alt="Bolt Fun" />
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

36
public/styles.css Normal file
View File

@@ -0,0 +1,36 @@
.loading-app {
position: fixed;
inset: 0;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
}
.loading-app.removed {
transition: opacity 0.8s ease-out;
opacity: 0;
}
.loading-app img {
width: min(80%, 250px);
animation: fadeInOut 3s ease-in-out infinite alternate;
}
@keyframes fadeInOut {
0% {
opacity: 1;
/* transform: rotate(0deg); */
}
80% {
opacity: 1;
/* transform: rotate(0deg); */
}
100% {
opacity: 0;
/* transform: rotate(360deg); */
}
}

7
src/App.tsx
View File

@@ -63,6 +63,13 @@ function App() {
setTimeout(() => {
Wallet_Service.init();
}, 2000)
const loadingAppPanel = document.querySelector('.loading-app');
loadingAppPanel?.classList.add('removed');
setTimeout(() => {
loadingAppPanel?.remove()
}, 800)
}, []);