CODEWITHSUNDEEP
htmlcssreactjsbootstrap-4preloader
Preslava Zheleva
Preslava Zheleva

Reputation: 11

ReactJS // Preloader dissapears only after page refresh

I am trying to do a loader animation where user clicks a home link. When I click the home page it opens and runs the preloader, but the preloader never goes away - only after page refresh.

JS:

$(document).ready(function () {

        /*preloader*/
        $(window).on('load', function () {
            $('.preloader').fadeOut('slow', function () {
                $(this).remove();
            });
        });
}

HTML:

<div className="preloader">
    <div className="ball ball-1">
    </div>
    <div className="ball ball-2" />
    <div className="ball ball-3" />
 </div>

I've tried the following to check if the url has changed and to hide the preloader but then the css gets broken:

useEffect(() => {`your text`
      // execute on location change
       setCount(count + 1);
       console.log('Location changed!', location.pathname);
     const asd = document.querySelector(".preloader");
       if(asd){
       asd.style.display = "none";`your text`
       }
}, [location]);

Upvotes: 1

Views: 34

Answers (0)

Related Questions