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%
- - + +
diff --git a/pages/contributors.html b/pages/contributors.html index 14ccdce..e70159f 100644 --- a/pages/contributors.html +++ b/pages/contributors.html @@ -115,30 +115,8 @@
0%
- - + +
diff --git a/pages/faq.html b/pages/faq.html index b75662f..fa7281d 100644 --- a/pages/faq.html +++ b/pages/faq.html @@ -107,31 +107,10 @@
0%
- - + + +
diff --git a/pages/features.html b/pages/features.html index 659a2f1..0f53985 100644 --- a/pages/features.html +++ b/pages/features.html @@ -72,27 +72,8 @@
0%
- + diff --git a/pages/feedback.html b/pages/feedback.html index 8f17997..3e59a55 100644 --- a/pages/feedback.html +++ b/pages/feedback.html @@ -74,29 +74,7 @@
0%
- +
diff --git a/pages/licensing.html b/pages/licensing.html index 0bd41eb..5ec33a4 100644 --- a/pages/licensing.html +++ b/pages/licensing.html @@ -146,29 +146,7 @@
0%
- +
diff --git a/pages/privacy.html b/pages/privacy.html index d2a46fa..6208be5 100644 --- a/pages/privacy.html +++ b/pages/privacy.html @@ -98,29 +98,7 @@
0%
- +
diff --git a/pages/terms.html b/pages/terms.html index 8439f8f..f859b55 100644 --- a/pages/terms.html +++ b/pages/terms.html @@ -75,29 +75,7 @@
0%
- +