Issue with continuous loader malfunction

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>

javascripthtmljquerycss

Answer №1

Have you experimented with using JQuery in a similar way?

<script>
$(document).ready(function(){
  $(".loader").fadeOut(3000);
})
</script>

This causes the loader to gradually disappear over a 3-second period once the document is fully loaded.

If your website is dynamic, you may want to consider exploring alternative options.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The technique for accessing nested key-value pairs in a JSON object within an Angular application

After receiving the response from the backend, I have retrieved a nested hash map structure where one hash map is nested within another: hmap.put(l,hmaps); //hmap within hmap When returning the response to the frontend, I am using the ResponseEntity meth ...

javascriptangulartypescriptfor-loop

Discover the myriad of possibilities created by combining arrays

I am working on a code snippet that aims to generate an array containing all possible combinations between two or more arrays. However, I am encountering a specific issue. getCombn(arr: string | any[], pre?: string | undefined) { pre = pre || ' &a ...

javascriptarraysangularcombinationsslice

Adjusting the size of tables in raw JavaScript without altering their positioning

I am attempting to adjust the size of a th element without impacting the position of the next th in the row. Specifically, I want the width of the th to influence the width of the next th accordingly, rather than pushing it to the left. Below is the code ...

javascriptcsshtmlresize

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

Creating a flexible parent tag for grouping child elements using Angular 2

My Objective I am determined to develop an Angular 2 button component that can dynamically render as either an <a /> tag or an <input /> tag based on the value of a property called type. Furthermore, this button component should be able to acc ...

javascriptangular

Is there a way to access the value of a variable that is defined in FileReader.onloadend from within the callback function of XMLHttpRequest.onreadystatechange

I'm trying to access the value of the variable ext (defined within the function reader.onloadend) in the function xhr.onreadystatechange. Currently, it is returning undefined. Does anyone have any suggestions on how to resolve this issue? function pr ...

javascriptxmlhttprequestfilereader

Printing content using JavaScript on a point of sale (POS) printer with

I need to print a specific div on my POS printer named Optimuz. I have attempted using the following code: <div id="printAreaInvoice" style="visibility: hidden;font-size:8px;width:200px;"></div> < ...

javascriptjquery

how to use jQuery to hide a flash-containing div without losing its content

Hello, I created a modal with jQuery UI that is displaying in front of a flash movie. However, the HTML content inside the modal appears corrupted. I attempted to hide the movie just before the modal is triggered and make it reappear after closing the mo ...

javascriptjqueryflashhtml

Ways to swap out unique symbols for HTML elements

I'm currently facing a challenge where I need to locate all strings between two specific characters and then replace those characters with HTML tags. For example, $str = "dog *cat* ping goat *pizza* cow rabbit*"; I would like a function tha ...

phphtml

Using `texture.needsUpdate = true` in Three.js can cause significant performance issues due to its slow execution

I am currently working on a project involving a Three.js scene where I need to update textures after a certain period of time. However, I have noticed that updating the textures is causing a significant slowdown in the FPS, dropping it to 1-2 FPS for sever ...

javascriptthree.js

What is the best way to detect when I switch to a different tab than a specified tab using HTML and jQuery?

Here is the HTML code I am working with: <div id="tabsWithStyle"> <ul> <li><a href="#data1">Data 1 TAB</a></li> <li><a href="#data2">Data 2 TAB</a></li> <li>< ...

jqueryhtmltabs

A guide on verifying if two arrays of integers are permutations using JavaScript

Is there a way to determine if two sets of integers in JavaScript are permutations? For example, given the arrays: a = [1, 2, 3, 4, 5] and b = [2, 3, 5, 1, 4] I want a function that will return true if they are permutations of each other. ...

javascriptarrayspermutation

Implementing conditional styling in Vue.js using v-bind based on specific Bootstrap breakpoints

Is there a way to dynamically assign styles based on different bootstrap breakpoints using v-bind style directive with vue? I'm encountering an error in the console that says "Whitespace was expected." <div class="footer" :style="{$b ...

javascriptvue.jsif-statementbootstrap-4vue-directives

Unleashing the Potential: Integrating a Scanner Device with

Currently, I'm facing the challenge of integrating a Scanner device with my Angular application. On one of the pages dedicated to scanning, users are able to view an alert indicating the connection status of the Scanner as well as any scanned document ...

javascriptangularangularjsangular-material

Incorporating numerous dropdown menus to a table filled with data retrieved from a database

I have implemented a dynamic table that adds a new row at the end when a button is clicked. One of the columns in the table contains a dropdown list, and I want this dropdown list to display values from a database. This is how I am constructing my table ...

phpjavascript

Designing tab navigation in React Native

Is there a specific way to customize only the ORANGE tab's style? I am curious to learn how to address this particular scenario. I have attempted various methods to modify the style of the ORANGE tab. My application utilizes navigation 5. <Tab.Navi ...

javascriptreactjsreact-nativereact-navigation

CSS Background color only applies to the lower section of the page

I'm attempting to create a social media button using an anchor tag and a fontawesome icon. My goal is to have the entire background colored black with CSS, but my previous attempts only resulted in the bottom half turning black. Html: <div class ...

htmlcss

Ways to avoid data looping in jQuery Ajax requests

This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...

javascriptjqueryhtmlajaxjquery-select2

Display and Conceal Selected Choices

I have designed a simple form with two dropdown menus. Both menus have the same options: <option value='1234:0'>Closed</option> <option value='4567:2'>Open</option> <option value='6857:1'>Dead< ...

phpjqueryhidehtml-select

Count the number of distinct values in an array of objects

Could you assist me with a JavaScript problem I'm experiencing? I have an array and need to extract the count key from the response. Here is a sample response: var events = [ ... I would like the array response to look like this: var events = [ ... ...

javascriptnode.jsarrayssorting