From eedb8719a46c01c1a977d5f90484360ece5d6086 Mon Sep 17 00:00:00 2001
From: Jasleen1210 <05kaur.j@gmail.com>
Date: Wed, 7 Aug 2024 18:04:43 +0530
Subject: [PATCH] Fixed preloader bug
The particle and snowflake effect has been fixed in all the side pages.
The issue was that the preloader.css file had "display none" for the content that affected the particle effect, and the snowflake effect was preceeded by warning modal in script.js so that cause error in console.
Ive made a separate file for the preloader js and added the snowflake function in it so that all the pages have the preloader as well as the snowflake thing
---
404.html | 29 +++--------------------------
css/preloader.css | 6 +-----
js/preloader.js | 21 +++++++++++++++++++++
js/script.js | 10 +++++++---
pages/about.html | 26 ++------------------------
pages/contributors.html | 26 ++------------------------
pages/faq.html | 27 +++------------------------
pages/features.html | 23 ++---------------------
pages/feedback.html | 24 +-----------------------
pages/licensing.html | 24 +-----------------------
pages/privacy.html | 24 +-----------------------
pages/terms.html | 24 +-----------------------
12 files changed, 45 insertions(+), 219 deletions(-)
create mode 100644 js/preloader.js
diff --git a/404.html b/404.html
index 8846179..1fdab0b 100644
--- a/404.html
+++ b/404.html
@@ -16,38 +16,15 @@
-
-
+
diff --git a/css/preloader.css b/css/preloader.css
index 2e0b879..d95b7b2 100644
--- a/css/preloader.css
+++ b/css/preloader.css
@@ -4,7 +4,7 @@
left: 0;
width: 100%;
height: 100%;
- background: rgba(0, 0, 0, 0.8);
+ background: rgba(26, 25, 25, 0.916);
display: flex;
justify-content: center;
align-items: center;
@@ -52,7 +52,3 @@
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
-
-#content {
- display: none; /* Hide content until preloader is done */
-}
\ No newline at end of file
diff --git a/js/preloader.js b/js/preloader.js
new file mode 100644
index 0000000..3f44c70
--- /dev/null
+++ b/js/preloader.js
@@ -0,0 +1,21 @@
+window.addEventListener('load', () => {
+ const preloader = document.getElementById('preloader');
+ const content = document.getElementById('content');
+ const loadingPercentage = document.getElementById('loading-percentage');
+
+ let percentage = 0;
+
+ const interval = setInterval(() => {
+ percentage += 10;
+ loadingPercentage.textContent = `${percentage}%`;
+ if (percentage >= 100) {
+ clearInterval(interval);
+ setTimeout(() => {
+ preloader.style.display = 'none';
+ content.style.display = 'block';
+ document.body.style.overflow = 'auto';
+ }, 300);
+ }
+ }, 100);
+ snowflakeEffect();
+});
diff --git a/js/script.js b/js/script.js
index 73b4605..c517324 100644
--- a/js/script.js
+++ b/js/script.js
@@ -774,11 +774,14 @@ window.onload = function () {
}, interval);
}
animateText();
-
+ snowflakeEffect();
+};
+function snowflakeEffect(){
+
// Snowflakes animation logic
const snowflakesContainer = document.querySelector(".snowflakes");
const numberOfSnowflakes = 300;
-
+
for (let i = 0; i < numberOfSnowflakes; i++) {
const snowflake = document.createElement("div");
snowflake.classList.add("snowflake");
@@ -788,7 +791,8 @@ window.onload = function () {
snowflake.style.height = `${Math.random() * 6 + 2}px`; // Randomize snowflake size (2px to 8px)
snowflakesContainer.appendChild(snowflake);
}
-};
+
+}
//the success and failure wale pop ups
diff --git a/pages/about.html b/pages/about.html
index aa68e75..1767b0a 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -76,30 +76,8 @@
0%
-
-
+
+