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

Deleting a specific row within a Material UI DataGrid in Reactjs: Tips and tricks

As I embark on this React project, things are progressing smoothly. However, a challenge has arisen. The functionality I aim for is as follows: When the checkbox in a row is clicked, I want that particular row to be deleted. For instance, selecting checkb ...

javascriptjavareactjsmaterial-ui

Is the provided code snippet considered a function-statement, function-expression, and function-expression-statement?

Currently, I am examining some code snippets from the EcmaScript.NET project. Specifically, I am delving into the definitions within FunctionNode.cs file. The comment above the definitions provides a detailed explanation of the three types of functions tha ...

javascript

Using jQuery to iterate through rendered HTML with the ForEach function

I am utilizing JS/jQuery code to extract the cell value of an ASP DetailsView control (rendered HTML), validate it against a condition, and hide a specific div based on the result. Specifically, the code is examining whether the cell value is formatted lik ...

javascriptjqueryasp.netforeachinnerhtml

Fetching the added information using ajax

Hey everyone, I have a question about reloading the appended data on my page. The page has infinite scrolling functionality and I want to reload the elements that are added when a particular element is clicked. The loading works fine for elements that were ...

htmlajax

Do not use unnecessary variables for storing references in ES6

Despite using react es6, I am still unsure how to refrain from needing to use the variable that for this scenario: const that = this; UploadApi.exec(file).then(data => { that.setState({ loading : false}); }); ...

javascriptreactjsecmascript-6

Trying out asynchronous testing using Mocha and Sinonjs for the first time

In my current project, I am utilizing a custom micro framework developed by our team, where we make use of Mongoose. To handle the mongoose object, we have implemented a modelfactory that provides us with a corresponding model based on the mongoose name o ...

javascriptnode.jsunit-testingsinon

Steps for replacing the firestore document ID with user UID in a document:

I've been attempting to retrieve the user UID instead of using the automatically generated document ID in Firebase/Firestore, but I'm encountering this error: TypeError: firebase.auth(...).currentUser is null This is the content of my index.js ...

javascriptfirebasefirebase-authenticationgoogle-cloud-firestore

Is it possible to encode JavaScript with masked binary values?

This segment of code produces the output D. The real question is - HOW? alert([][(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![] ...

javascriptobfuscation

Transforming PHP Arrays into JavaScript Objects

I am facing some challenges with my code due to my limited understanding of JSON and JS. Here's the code snippet I have been working on: $markersData = array(); $x = 0; while ($row = @mysqli_fetch_assoc($result)) { $type = $row['type']; ...

javascriptphparraysjson

Python Selenium: How to locate elements using xpath in the presence of duplicate elements within the HTML code

Currently, I am utilizing selenium to extract data from a liquor sales website to streamline the process of adding product information to a spreadsheet. My workflow involves logging into the website using selenium and searching for the specific product. Wh ...

pythonhtmlseleniumxpath

An issue has occurred with NPM CI where the bindings are not available from watchpack-chokidar2:fsevents

After executing npm ci on GitHub Actions, I encountered the following error: Run npm ci npm ERR! bindings not accessible from watchpack-chokidar2:fsevents npm ERR! A complete log of this run can be found in: npm ERR! /home/runner/.npm/_logs/2021-09-17 ...

javascriptnode.jsnpmgithub-actionspackage.json

Creating Component Variants for Google Optimize A/B testing in Next.js

I've been attempting to create a component variant in Google Optimize beyond just text or color changes, but I haven't found a suitable method to do so yet. I'm looking for guidance on how to integrate/configure Optimize with my code in orde ...

javascriptreactjsnext.jsab-testinggoogle-optimize

Instructions on submitting a form containing multiple select lists using the enter key

After researching various threads, I have come across solutions using the JS onkeypress function to trigger actions with input fields. However, in my case, I need to implement this functionality with a form that consists of multiple select lists instead of ...

javascriptphphtmlforms

Efficient creation of a user-friendly interface application designed to retrieve data from a nearby server

The Challenge I am faced with the task of creating a simple GUI application that can either be run on a local Ubuntu 14 server or locally while still being able to access data from the server for multiple users to make changes to a basic array data file. ...

pythonhtmluser-interfaceserverwysiwyg

Refresh Angular component upon navigation

I have set up routes for my module: const routes: Routes = [ { path: ":level1/:level2/:level3", component: CategoriesComponent }, { path: ":level1/:level2", component: CategoriesComponent}, { path: ":level1", component: ...

javascriptangulartypescript

Arranging shapes for varying levels of magnification

Seeking assistance with properly aligning two forms. I have tried using a positioning approach, but the layout gets disrupted when the browser's Zoom level is adjusted. The second button ends up shifting slightly either upwards or downwards. Here is t ...

htmlcssformspositioning

Employing the html.validationmessagefor to display a client-side error notification

My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...

javascriptjqueryhtmlasp.net-mvcclient-side-validation

What could be causing my content to unexpectedly break out of its designated div structure?

My website on Wordpress is causing me trouble. When I input text directly into the HTML/CSS structure hardcoded style, it fits perfectly. However, when I attempt to do the same thing using Wordpress <?php echo the_content();?>, it ends up breaking ou ...

csswordpresstext

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

The AJAX post request is returning an undefined value

I'm working with JavaScript, AJAX, and Node.js but I'm having trouble receiving a value on the server side when making a POST request. Despite my efforts to test it out, the console keeps returning 'value undefined'. Here's a snip ...

javascriptnode.jsajax