Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Animated Preloader added #405

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Animated Preloader added #405

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 96 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,98 @@

</head>

<style>
/* Preloader styling */
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 50;
background: linear-gradient(to right, #26a69a, #26a69a, #26a69a); /* Yellow gradient */
}

/* Text animation */
.animate-stroke {
text-transform: uppercase;
animation: stroke 2.5s infinite alternate;
stroke-width: 2;
stroke: white;
font-size: 70px;
font-family: "Arial", sans-serif;
}

/* Keyframes for the stroke animation */
@keyframes stroke {
0% {
fill: #fff;
stroke: #0b8276;
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
stroke-width: 1;
}

70% {
fill: #fff;
stroke: #0b8276;
}

80% {
fill: #fff;
stroke: #0b8276;
stroke-width: 1;
}

100% {
fill: #fff;
stroke: #0b8276;
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
stroke-width: 0;
text-shadow: 0 0 10px #fff, 0 0 15px whitesmoke;
}
}

/* Initially hide the main content */
.hidden {
display: none;
}

/* When main content is shown */
.main-content {
display: block;
padding: 20px;
width: 100vw;
min-height: 100vh; /* Ensure it covers at least the full height */
padding: 0; /* Reset any padding */
margin: 0; /* Remove margin */
Comment on lines +81 to +86
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove duplicate padding declaration.

The .main-content class has duplicate padding properties.

   .main-content {
     display: block;
-    padding: 20px;
     width: 100vw;
     min-height: 100vh;
     padding: 0;
     margin: 0;
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
display: block;
padding: 20px;
width: 100vw;
min-height: 100vh; /* Ensure it covers at least the full height */
padding: 0; /* Reset any padding */
margin: 0; /* Remove margin */
display: block;
width: 100vw;
min-height: 100vh; /* Ensure it covers at least the full height */
padding: 0; /* Reset any padding */
margin: 0; /* Remove margin */

}
</style>
<body>
<div class="preloader">
<svg viewBox="0 0 1320 300">
<text
x="50%"
y="50%"
dy=".35em"
text-anchor="middle"
class="animate-stroke"
style="font-weight: bold;"
>
Waste Management
</text>
</svg>
</div>

<!-- Progress Bar -->


<div id="progress-container">
<div id="progress-bar"></div>
</div>
<div class="main-contetnt">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix critical typo in main content class name.

There's a typo in the class name that will break the preloader functionality. The JavaScript looks for .main-content but the HTML uses .main-contetnt.

-    <div class="main-contetnt">
+    <div class="main-content">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="main-contetnt">
<div class="main-content">

<header>


Expand Down Expand Up @@ -51,6 +135,7 @@ <h1>Waste Management</h1>
<button id="menu-toggle" aria-label="Toggle menu">☰</button>
</div>
</header>
</div>
<section class="hero">
<div class="hero-content">
<div class="hero-text">
Expand Down Expand Up @@ -757,6 +842,15 @@ <h3>Our Commitment to Sustainability</h3>
</script>
<script src="https://www.chatbase.co/embed.min.js" chatbotId="wQJs3fix9gu515zxNshBF" domain="www.chatbase.co" defer>
</script>
<script>
window.addEventListener('load', function() {
// Show the preloader for 5 seconds
setTimeout(function() {
document.querySelector('.preloader').style.display = 'none'; // Hide preloader
document.querySelector('.main-content').classList.remove('hidden'); // Show main content
}, 5000); // 5 seconds delay
});
Comment on lines +846 to +852
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve preloader timing and reliability.

The current implementation has several limitations:

  1. The 5-second fixed delay might be too long for fast connections or too short for slow ones
  2. No fallback if JavaScript is disabled
  3. Doesn't consider the actual content load state

Consider this improved implementation:

     window.addEventListener('load', function() {
-      // Show the preloader for 5 seconds
+      // Track actual content load state
+      const contentLoaded = new Promise((resolve) => {
+        if (document.readyState === 'complete') {
+          resolve();
+        } else {
+          window.addEventListener('load', resolve);
+        }
+      });
+
+      // Ensure minimum animation time of 2 seconds
+      const minimumDelay = new Promise(resolve => setTimeout(resolve, 2000));
+
+      // Hide preloader only when content is ready and minimum time has passed
+      Promise.all([contentLoaded, minimumDelay]).then(() => {
         setTimeout(function() {
           document.querySelector('.preloader').style.display = 'none';
           document.querySelector('.main-content').classList.remove('hidden');
-        }, 5000); // 5 seconds delay
+        }, 0);
+      });
     });

Also add this fallback in the <head>:

<noscript>
  <style>
    .preloader { display: none !important; }
    .main-content { display: block !important; }
  </style>
</noscript>

</script>
</body>

</html>