Skip to content

Commit 82433a3

Browse files
MySecondLanguageMySecondLanguage
committed
Dashboard preloader added
1 parent 4b20529 commit 82433a3

File tree

1 file changed

+100
-3
lines changed

1 file changed

+100
-3
lines changed

‎templates/dashboard.html‎

Lines changed: 100 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,113 @@
55
<meta charset="utf-8" />
66
<link rel="icon" href="https://cdn.nxtbn.com/1.0.0/favicon.ico" />
77
<meta name="viewport" content="width=device-width,initial-scale=1" />
8-
<meta name="theme-color" content="#000000" />
8+
<meta name="theme-color" content="#0caf60" />
99
<meta name="description" content="Powered by NXTBN - Blazing Fast" />
1010
<link rel="apple-touch-icon" href="https://cdn.nxtbn.com/1.0.0/logo192.png" />
1111
<link rel="manifest" href="https://cdn.nxtbn.com/1.0.0/manifest.json" />
12-
<title>NXTBN - Solution for mission criticle Online Shop</title>
12+
<title>NXTBN - Solution for Mission-Critical Online Shop</title>
1313
<script defer="defer" src="https://cdn.nxtbn.com/1.0.0/static/js/main.js"></script>
1414
<link href="https://cdn.nxtbn.com/1.0.0/static/css/main.css" rel="stylesheet">
15+
16+
<style>
17+
#preloader {
18+
position: fixed;
19+
top: 0;
20+
left: 0;
21+
width: 100%;
22+
height: 100%;
23+
background: rgb(12, 175, 96, 0.9);
24+
color: white;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
justify-content: center;
29+
z-index: 9999;
30+
font-family: Arial, sans-serif;
31+
text-align: center;
32+
}
33+
34+
#progress-bar {
35+
width: 80%;
36+
height: 6px;
37+
background: rgba(255, 255, 255, 0.2);
38+
margin-top: 15px;
39+
border-radius: 4px;
40+
overflow: hidden;
41+
}
42+
43+
#progress-fill {
44+
width: 0%;
45+
height: 100%;
46+
background: rgb(255, 255, 255);
47+
transition: width 0.3s ease-in-out;
48+
}
49+
50+
#loading-text {
51+
font-size: 20px;
52+
font-weight: bold;
53+
margin-bottom: 10px;
54+
}
55+
56+
#loading-percentage {
57+
font-size: 16px;
58+
margin-top: 10px;
59+
}
60+
</style>
61+
62+
<script>
63+
document.addEventListener("DOMContentLoaded", function () {
64+
let percentage = 0;
65+
const messages = [
66+
"Preparing Store...",
67+
"Optimizing Performance...",
68+
"Loading Data...",
69+
"Finalizing Setup..."
70+
];
71+
let messageIndex = 0;
72+
73+
function updateLoader() {
74+
if (percentage >= 100) {
75+
document.getElementById("preloader").style.display = "none";
76+
} else {
77+
percentage += Math.floor(Math.random() * 10 + 5);
78+
if (percentage > 100) percentage = 100;
79+
80+
document.getElementById("loading-percentage").textContent = percentage + "%";
81+
document.getElementById("progress-fill").style.width = percentage + "%";
82+
83+
if (percentage > (messageIndex + 1) * 30 && messageIndex < messages.length - 1) {
84+
messageIndex++;
85+
document.getElementById("loading-text").textContent = messages[messageIndex];
86+
}
87+
88+
setTimeout(updateLoader, 500);
89+
}
90+
}
91+
92+
updateLoader();
93+
94+
95+
window.addEventListener("load", function () {
96+
setTimeout(() => {
97+
document.getElementById("preloader").style.display = "none";
98+
}, 500);
99+
});
100+
});
101+
</script>
15102
</head>
16103

17-
<body><noscript>You need to enable JavaScript to run this app.</noscript>
104+
<body>
105+
<noscript>You need to enable JavaScript to run this app.</noscript>
106+
107+
<div id="preloader">
108+
<h2 id="loading-text">Setting up your high-performance store dashboard, please wait...</h2>
109+
<div id="progress-bar">
110+
<div id="progress-fill"></div>
111+
</div>
112+
<p id="loading-percentage">0%</p>
113+
</div>
114+
18115
<div id="root"></div>
19116
</body>
20117

0 commit comments

Comments
 (0)