aiquiral/yp-rubix
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

loader added

Browse source
This commit is contained in:
Anuj K 2025-08-29 17:26:28 +05:30
parent 73e11094ce
commit 7c6a7df48b
3 changed files with 890 additions and 563 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -7,7 +7,19 @@
<title>Young Pandas</title> <title>Young Pandas</title>
</head> </head>
<body> <body>
<!-- Loading Screen -->
<div id="loading-screen">
<div class="loading-container">
<div class="loading-spinner"></div>
<div class="loading-text" id="loading-text">Loading Experience...</div>
<div class="loading-progress">
<div class="loading-progress-bar" id="loading-progress-bar"></div>
</div>
<div class="loading-percentage" id="loading-percentage">0%</div>
</div>
</div>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>
</html> </html>

1310
src/main.js
View file

File diff suppressed because it is too large Load diff

127
src/style.css
View file

@ -1,8 +1,127 @@
body { :root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
* {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
overflow: hidden; overflow: hidden;
} }
canvas {
display: block; /* Loading Screen Styles */
} #loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}
#loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-container {
text-align: center;
max-width: 400px;
padding: 2rem;
}
.loading-spinner {
width: 60px;
height: 60px;
margin: 0 auto 2rem;
border: 3px solid rgba(255, 165, 0, 0.1);
border-top: 3px solid #FFA500;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
font-size: 1.5rem;
font-weight: 300;
color: #ffffff;
margin-bottom: 2rem;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.loading-progress {
width: 100%;
height: 2px;
background-color: rgba(255, 165, 0, 0.1);
border-radius: 1px;
overflow: hidden;
margin-bottom: 1rem;
}
.loading-progress-bar {
height: 100%;
background: linear-gradient(90deg, #FFA500 0%, #ff8600 100%);
width: 0%;
transition: width 0.3s ease;
border-radius: 1px;
}
.loading-percentage {
font-size: 0.9rem;
color: #FFA500;
font-weight: 500;
letter-spacing: 1px;
}
/* Responsive Design */
@media (max-width: 768px) {
.loading-container {
padding: 1rem;
}
.loading-text {
font-size: 1.2rem;
}
.loading-spinner {
width: 50px;
height: 50px;
}
}
#app {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}