Susmita-Dey / Sukoon

This is a stress-relieving website project made for the hackathon Hackofiesta. This project is under the theme Healthcare.
https://sukoon-stress-free.netlify.app/
MIT License
113 stars 153 forks source link

[FEATURE] <description>Adding preloader to child therapy page #556

Open Vanshiii203 opened 2 years ago

Vanshiii203 commented 2 years ago

Description

I would like to add to preloader child therapy page

Screenshots

No response

Additional information

No response

AdityaPrasad275 commented 1 year ago

Hello there @Vanshiii203 ! I followed a quick yt tutorial for this and have the following changes for this ->

childTherapy.html -

<body>
+ <div class="preloader">
+   </div>

<!-- Navbar Section -->
    <nav>
  </footer>
  <script src="childTherapy.js"></script>

+ <script>
+    var loader = document.querySelector(".preloader");

+   window.addEventListener("load", function(){
+     loader.style.display = "none";
+    });
+ </script>

  </body>

childTherapy.css (all additions)

.preloader {
  height: 100vh;
  width: 100%; 
  background: #1C1B1B url(../images/comp_4.gif) no-repeat center center; 
  position: fixed; 
  z-index: 100;
  background-size: 25%;
}

Used a simple pre loader gif and tailored the background with respect to the gif.

Does this meet the specifications / demands for the feature? Should i open a PR with these changes