Is this loader going through a triple loop?

<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-repeat: no-repeat;
background: url('images/page-loader.gif');
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">     </script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>

html

I have implemented this loader code for my website, however, it seems to be repeating itself three times. I have tried using the 'no repeat' CSS property but it doesn't seem to be working.

javascripthtmlcsstwitter-bootstrap-3

Answer №1

Check out this example that demonstrates the solution you're looking for: `

$(window).load(function() {
  $(".bg").fadeOut('slow');
})
.bg {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.loader {
  background-repeat: no-repeat;
  background: url('https://i.sstatic.net/3fjSD.gif');
  width: 42px;
  height: 42px;
  margin: 0px auto;
  top: 50%;
  position: absolute;
  left: 0px;
  right: 0px;
  margin-top: -21px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
  <div class="loader"></div>
</div>

`

Answer №2

If you want to display a loading spinner, make sure to include a div element in your code. Here are the necessary details:

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="loader">
</div>

JavaScript

$(window).load(function() {
$(".loader").fadeOut("slow");
})

CSS

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif') no-repeat;
}

A sample image has been provided for reference.

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

Is there a way to retrieve the value of an element by clicking on its corresponding button using MUI framework?

I am working on a dashboard feature where I need to update the status by clicking on it. However, I am facing an issue with changing the state value upon clicking. Here is my component: <MenuItem> <Button fullWidt ...

javascriptreactjsmaterial-ui

Is it possible for the HTML data attribute to store a direct link to a specific DOM element?

Can the HTML data- attributes be used to store a reference to another DOM element? As shown in this jQuery example: var domel1 = document.getElementById("#mydiv"); var domel2 = document.getElementById("#mydiv2"); $(domEl1).attr('data-domel', dom ...

javascriptjqueryhtmldom

Generating a fresh PHP webpage through the administration dashboard

Currently, I am working on developing a blog page using PHP. One key aspect that I am struggling with is figuring out how to efficiently create new posts from the admin panel. Any suggestions or advice would be greatly appreciated! ...

javascriptphp

Where can I find the CSS classes for Material-UI?

I am new to Material UI and I want to explore its grid examples. However, when I tried coding the example provided below, it gave me an error saying that there was no CSS file found to load for these examples. Without including the className parameter, I ...

cssreactjsmaterial-ui

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

javascriptangularjs

What is the best way to obtain the output of a JavaScript function on the server side?

I'm dealing with a JavaScript function that returns an array in this particular format: <script type="text/javascript"> function looping() { var column_num = 1; var array = []; $("#columns ul").not(" ...

c#javascriptjqueryasp.netjson

"Discover the process of sending a JSON value from a PHP page to an HTML page using AJAX, and learn how to display the resulting data

I am currently validating an email ID using PHP and AJAX, with the intention of returning a value from the PHP page to the HTML in JSON format. My goal is to store this return value in a PHP variable for future use. All of this is being executed within C ...

javascriptphpajaxjsoncodeigniter

Change the input value by clicking different buttons

Looking for a way to change the value or source of an input when clicking on different buttons? For example, clicking on Button 1 changes the input to "apple" and Button 2 changes it to "orange", etc. Here is a snippet of what I have tried so far: $(doc ...

javascriptjquery

What is the procedure for selecting an element based on its child containing specifically filtered text?

Imagine a webpage with the following elements: <div data-search="type1"> any HTML <!-- .click is a child of any level --> <span class="click" data-source="page1.html">blue</span> <!-- let's call it "click1 ...

javascriptjqueryhtmlajaxregex

Is there a way to dismiss a modal window from the parent?

How can I close a modal window from its parent? This task seems quite challenging to accomplish. Essentially, I am opening a non-modal window. In some cases, the user may open a modal window from this non-modal window. If I close the non-modal window, I al ...

javascripthtmlmodal-dialogmodalpopupsnon-modal

The side menu in Bootstrap dropdown experiences a one-time functionality

When navigating through a responsive top menu with Bootstrap, everything works seamlessly - from toggling the menu to dropdown functionality. However, I encountered an issue with the side menu as nav-pills used to select tab-panes. <div class="containe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps for implementing a select all feature with jQuery

I'm currently working on a jQuery function that is acting as a select-all option. Everything is functioning correctly except that when I deselect any of the child elements from select all, the option remains enabled. My goal is to enable or disable th ...

javascriptjquerycss

After updating to the latest npm version, the NodeJS server continues to display the error message "Upgrade Required" when loading pages

After developing a Node project using NodeJS version 5.4.x and NPM version 3.3.12 on Windows, I encountered an issue where the project throws an "Upgrade Required" message (HTTP Error code - 426) upon loading the page after some time of inactivity. To add ...

javascriptnode.jsnpmnodeclipse

Mobile navigation bar with Bootstrap transparency

I recently encountered a challenge with my Bootstrap navbar where I needed to remove the background. To achieve this, I applied the class "navbar-fixed-top" to the main wrapper. <nav class="navbar navbar-fixed-top"> After making this change, the na ...

jqueryhtmlcsstwitter-bootstrap

Can components be designed in a way that includes elements such as buttons or text areas in the code, but allows for them to be excluded when the component is used?

I have a custom form component that I designed. Depending on certain cases, I want the form to display either a button or a text field instead of the input field as currently coded. function FormTypeOne(props) { return ( <form className={classes.f ...

javascriptreactjsnext.jsjsx

Using Reactjs to set state with a dynamically generated key-value pair

I have a dynamic object in props that I need to transfer to state @setState key: val values: another_key: value @props.data.option: @props.data.value Unfortunately, the above method does not work as expected. I have come up with an alternativ ...

javascriptreactjsjavascript-objects

Guide to positioning a border with CSS

How can I align a border to the right in this code? This is the CSS snippet that I currently have: p { text-align: right; color: #757575; Background-color: #FFFFFF; font-size: 2.4em; width: 50px; } <p>Home<br> <a href="aboutu ...

csshtmlalignmentborder

Clicking on a button will trigger the opening of a modal dialog

I encountered an issue with the following code: <sepa-modal ref="sepaModal" /> <b-card id="show-btn" class="card-modal" @click="openSepaModal()" > </b-card> openSepaModal ...

javascriptvue.jsvuejs2bootstrap-vue

Numerous points highlighted on the map

As I develop my application, I am working on setting up an event to automatically load data from a CSV excel file for display. My goal is to extract information from the Excel CSV file and use it to populate locations on a Google Map within my application ...

javascriptjquerygeolocationjquery-events

"Ensuring a DIV element has a height of 100% within

Is there a way to set and enforce a div's height to be 100% of the browser window, another div, or a table cell without resorting to complicated hacks found on Stack Overflow or other websites? ...

csshtmlheight