Gradual disappearance of preloader as the page loads

I'm facing an issue with setting a gif as a website preloader. Despite trying different JavaScript solutions, the preloader remains visible even after the page has finished loading.

$(window).on("load", function() {
  $(".loading").fadeOut("slow");
});
.loading {
  background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: contain;
  z-index: 9999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading"></div>
<div class="content">Test</div>

javascripthtmlcsspreloader

Answer №1

Here is another approach you can take

$(document).ready(function() {
  $(".loading").fadeOut("slow");
});
.loading {
  background: #f4ded3 url('https://i.pinimg.com/originals/db/e6/b9/dbe6b90d0fd0d209001cb64eefd038d7.gif') no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: contain;
  z-index: 9999999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loading"></div>
<div class="content">Test</div>

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

React child component does not refresh upon modification of an array property

In my main application, I have two subcomponents that both receive the same model property. The first subcomponent deals with a number prop from model.myNumberProperty, and the second subcomponent handles an array prop from model.myArrayProperty. When ch ...

javascriptreactjsreact-hooks

What is the best way to find an onmouseover element with Selenium in Python?

I've been attempting to scrape a website and encountered an element that reveals information in a bubble when the mouse hovers over it. I am using Selenium for web scraping, but I am unsure how to locate this specific element. After examining the pag ...

javascriptpythonselenium

Node.js client-sessions malfunction when not utilized as a primary callback

When utilizing express.Router, I'm attempting to create a middleware for a particular router in my application that will establish and handle a session. However, this approach fails if the client-sessions session is not invoked directly by Router().us ...

javascriptnode.jsexpress

Angular animations are failing to function in the Visual Studio 2017 template

I am facing a challenge with incorporating animations in Angular 2 using Visual Studio 2017. I believe there must be a simple solution that I am overlooking at the moment. My goal is to animate certain elements and I have been testing the animations by tri ...

javascriptangularjsanimationvisual-studio-2017

Automate the process of adding or removing a class created by material ui through programming

Is there a way to dynamically manage the material-UI classes I declared in makeStyles()? Below is the code snippet: import React from 'react'; import { DropboxIcon, GoogleDriveIcon, BoxIcon } from '../components/icons'; import { makeSt ...

javascriptreactjsmaterial-ui

Why does adding to an array in the Vuex store replace all existing values with the last entry?

Utilizing vuex-typescript, here is an example of a single store module: import { getStoreAccessors } from "vuex-typescript"; import Vue from "vue"; import store from "../../store"; import { ActionContext } from "vuex"; class State { history: Array<o ...

javascriptvue.jsvuejs2vuexvuex-modules

Utilizing AXIOS and .NET 5 Web API for Managing Access and Refresh Tokens

In my React application using Redux, we are utilizing Axios to interact with our Web API. To ensure security, we have implemented JWT access tokens along with refresh tokens. The server side token generation for our Web API is based on this code: https:/ ...

javascriptreactjsaxios

How can I retrieve the parent scope in an Angular UI nested named view?

One of the challenges I faced in my application was dealing with nested views within several screens. After experimenting with different approaches, I discovered that creating modal dialog boxes and sliding panels as actual nested states with corresponding ...

javascriptangularjsangular-uiangular-ui-router

The Vue.js form is experiencing issues with submission when pressing the "enter" key

TL;DR Question Why is it that having 2 identical input fields in a form prevents the enter button from submitting the form? More detailed question Straight to the point. I'm attempting to use the `enter` button to submit a form when an input elemen ...

javascriptvue.js

Guide on redirecting the user to the "notFound" page within the getServerSideProps function in Next.JS whenever an incorrect params.id is provided

export const getServerSideProps = async ({ params }) => { const res = await fetch( `https://pixabay.com/api/?key=${process.env.API_KEY}&id=${params.id}` ); const { hits } = await res.json(); if (!hits) { return { notFound: tr ...

javascriptnode.jsreactjsreact-nativenext.js

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

I am looking for a way to clear the textboxes and display an alert message if the data is not found in the MySQL table. I encountered an issue when using type: 'json' as removing it makes the alert work, but then the data from the MySQL table doe ...

javascriptphpjquerymysqlajax

Selecting a color in Vuetify's color picker triggers the @

I have incorporated the Vuetify color picker into my project for changing the background and text colors of elements. Currently, I am storing the hex color values in Firestore by using the @input="updateColor" attribute on the v-color-picker to t ...

javascriptvue.jsvuetify.jscolor-picker

Displaying images retrieved from firebase on a React.js application

Currently, I am attempting to retrieve images from Firebase storage and then exhibit them in a React component. As a newcomer to React/Javascript, I find it challenging to grasp the asynchronous nature of React/JS. The issue I'm facing is that althoug ...

javascriptreactjsfirebase

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

The D3 force layout is currently displaying just a single connection

I've been experimenting with a graph that I found in this demo and now I want to modify it to display data from Spotify. I created a sample JSON file and adjusted the script accordingly for the new data format, everything seems to be working fine exc ...

javascriptjsond3.jsforce-layout

React-Query leads to variable becoming undefined upon component update

I'm currently utilizing dnd-beautiful-kit to organize Cards on my platform. Each Card contains specific information, as shown in the video, along with an Avatar component. The Avatar can either display the user's image (if avatarSource exists) or ...

javascriptreactjsdrag-and-dropreact-query

`Is there a way to modify the zAxis of a Paper component in Material-UI?`

Hello, I am curious about how to change the z-axis of a paper from MUI. https://i.sstatic.net/iKXLG.jpg The issue I'm facing is that the carousel is overlapping my menu and I need the menu to be on top of everything. Here is how I have it structure ...

javascriptreactjsmaterial-ui

Why isn't the mounted() lifecycle hook being triggered in my Vue 3 component?

I am struggling with a simple Vue 3 component that closely resembles some examples in the documentation. Here is the code: // Typewriter.vue <template> <div id="wrapper"> <p>{{ text }}</p> </div> </templa ...

javascriptvue.jsvuejs3

Tips for updating the value of a key in a JavaScript object when the TextField tag's value changes

Here is the schema I am using for my model: const workoutSchema = mongoose.Schema({ workouts: [ { workoutName: String, sets: Number, reps: Number, weight: Number, }, ], }); Below is the postData referenced in the text f ...

javascriptmongodbdictionarymaterial-uitextfield

The dimensions of the window - creating divs within td elements - the appearance of scroll

Here is the HTML code that I am working with: <table> <tr> <td class='tclone' id='clone'></td> <td class='loader' id='loader'> <div id='tdiv& ...

htmlcsshtml-table