I integrated a 3-second mini-loading animation on my website. It shows up every time I refresh the site or navigate to another page.
The issue I'm facing is that once I add the loading section, it never stops (it should only last for 3 seconds). Usually, this continuous loading occurs when there's an error in the code, but I can't seem to locate it. I want the loading section to display for just three seconds and then disappear.
Below is the code snippet for the loading section:
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAGj0lEQVRYR71Wa2yTVRh+zve13bpvLbCWsbUbu7CBF266wboxVtoqoCwTgv4wKt4TfxiixkRNjImJURKNoiLE+5ygeAmCCQQjAhtjQ6zMdhuo29puA7a5ra7delnb9TPnlNZ1a5cRwfdP+53zXp7znOe85xAAKDPpDTy42lAotNM3Ida2Njb+Tcf/DyO0yLLKynnKVJkzWjAkinVAuPbnn+pPXG8QDAA1ndFgWb9x/XKFUoFTJxowPDwEURR7rjcrMQBlJsNn+QsXblt/x...
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- loaders -->
<div class="loader hidden">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Goodgame_Studios_Logo_2015.svg/250px-Goodgame_Studios_Logo_2015.svg.png" alt="Loading..." />
<div id="rotator"></div>
</div>
<!-- Header -->
<header class="header">
<div class="header__content">
<nav class="menu">
<ul class="menu__internal">
<li><a href="" id="Home-page">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero -->
<section class="hero" data-midnight="default">
</section>I have commented out the loading section below as compared to before, so you can see what needs fixing.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAGj0lEQVRYR71Wa2yTVRh+zve13bpvLbCWsbUbu7CBF266wboxVtoqoCwTgv4wKt4TfxiixkRNjImJURKNoiLE+5ygeAmCCQQjAhtjQ6zMdhuo29puA7a5ra7delnb9TPnlNZ1a5cRwfdP+53zXp7znOe85xAAKDPpDTy42lAotNM3Ida2Njb+Tcf/DyO0yLLKynnKVJkzWjAkinVAuPbnn+pPXG8QDAA1ndFgWb9x/XKFUoFTJxowPDwEURR7rjcrMQBlJsNn+QsXblt/x...
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<!-- loaders -->
<!-- <div class="loader">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Goodgame_Studios_Logo_2015.svg/250px-Goodgame_Studios_Logo_2015.svg.png" alt="Loading..." />
<div id="rotator"></div>
</div> -->
<!-- Header -->
<header class="header">
<div class="header__content">
<nav class="menu">
<ul class="menu__internal">
<li><a href="" id="Home-page">text</a></li>
<li><a href="">text</a></li>
<li><a href="">text</a></li>
</ul>
</nav>
</div>
</header>
<!-- Hero -->
<section class="hero" data-midnight="default">
</section>