What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner:

<div class="pageloader">  
    <img src="../images/loader-large.gif" alt="Please wait..." />  
</div>

Here is the CSS for the pageloader class:

.pageloader {
    background: rgba( 255, 255, 255, 0.8 );
    display: none;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.pageloader img {
    left: 50%;
    margin-left: -32px;
    margin-top: -32px;
    position: absolute;
    top: 50%;
}

When the submit button in the form is clicked, I trigger this code in my script: 

$(".pageloader").fadeIn();

After making an AJAX call, in the always block, I use this code: 

$(".pageloader").fadeOut();

However, when I test the form submission, the spinner doesn't show up despite firing the AJAX call, and I don't see any error messages in the console. Any ideas on what might be the issue here? Thanks!

cssjquery-uibootstrap-5

Answer №1

For an easy solution, insert the following code snippet into your .js document and incorporate 

<div id="pageloader"></div>
in place of using class.

const select = (el, all = false) => {
  el = el.trim()
  if (all) {
    return [...document.querySelectorAll(el)]
  } else {
    return document.querySelector(el)
  }
}
let pageloader = select('#pageloader');
if (pageloader) {
  window.addEventListener('load', () => {
    preloader.remove()
  });
}

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

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

Issue with Bootstrap Navbar-Toggle Functionality in ASP.NET with Visual Studio 2010 Not Resolving

After installing a NuGet package, I proceeded to install Bootstrap which created the following folders: Contents containing Bootstrap CSS files Scripts containing .js files In the header of my Master Page, I included the scripts like this: <scrip ...

jqueryasp.netcsstwitter-bootstrap

"Is there a way to implement a sequence of fadeIn() followed by fadeOut() and then insertAfter

I have created a simple div fade cycle. Some of the divs are within an outer div, which is then placed in another outer div. I've written a script that cycles through these divs by fading them in and out. However, there seems to be a problem - the div ...

jqueryhtmlcssfade

Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: ) Any assistance on this matter would ...

javascriptjquerycss

Aligning text and checkboxes for perfection

Looking for a solution to align text and checkbox without using a blank image; I have the following HTML code: <span><b>System Type</b></span> <img src="~/Content/images/blank_img.png" alt=" ...

htmlcss

Enhance your user experience by implementing a jQuery solution that makes a div

Looking to add a small div on the right side of your screen that moves along with your vertical window slider? Wondering if jQuery has a function to get the current vertical slider position? I thought scrollTop() might work, but it only returns from a spe ...

jqueryhtmlcssjquery-ui

Certain rows in the table should maintain a consistent width, while others are allowed to vary

I am dealing with a table containing certain rows Some of these rows are visible, while others are hidden. The visible rows at the start are referred to as: mainTrs. Clicking on a visible row will make all rows with a class matching its id visible. Cli ...

javascriptjquerycsshtml-table

Having trouble with the find method when trying to use it with the transform

In my code, I have three div elements with different values of the transform property assigned to them. I store these elements in a variable using the getElementsByClassName method and then try to find the element where the value of the transform property ...

javascriptcss

Top method for achieving a smooth transition in a loading CSS3 animation

Having trouble implementing a fade in/fade out effect on a div with a CSS3 based login animation when a function is loaded. I have set up a jsfiddle but still can't get it to work. Any assistance would be greatly appreciated! http://jsfiddle.net/adam ...

javascriptjquerycssfadeinfadeout

Implement Tabulator JS 5 with Bootstrap JS 5's Dark Theme for a sleek and modern

Check out this Fiddle Example <div class="table-dark" id="table"></div> //Sample Data var tableData = [ {name:"Alice"}, {name:"Dave"}, {name:"Sophie"}, ] //Example Table var table ...

bootstrap-5tabulator

Ways to target other links exclusively during hover effect on a single link

I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink. .navlink { width: 100px; display:inline-block; background-color: red; } .navlink:hover~.navl ...

css

When applying animations to ngIf, the elements end up overlapping

I'm struggling to animate div elements when toggled using the Angular directive *ngIf. The issue I'm facing seems to be a common delay/timing problem in animations, but I haven't been able to find a solid solution. 1) When the current elem ...

javascriptcssangularangular5css-animations

Create a customized layout for your table in Datatables 2.0 with default controls

Previously, I was able to showcase three default controllers - buttons, search, and page length using the dom option: $('#data-table').DataTable({ dom: "<'row'<'col'l><'col' B><'col&ap ...

jquerydatatablesbootstrap-5

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

My goal is to make my website multilingual, allowing users to switch between languages using flags in a dropdown menu. Initially, I tried creating the flag images solely with CSS for better resizing ability but faced difficulties. So, I resorted to using s ...

htmlcss

Guide to building a nested dropdown navigation in Angular 12 with the power of Bootstrap 5

I am looking to implement a multilevel dropdown feature in my Angular 12 project with Bootstrap 5. Can someone please guide me on how to achieve this? For reference, you can view an example here. Thank you in advance! ...

angularbootstrap-5

How do I resolve the issue of unable to align the element correctly?

I am struggling to create a hamburger menu icon and align it using flexbox. Unfortunately, the icon is not aligning properly as it is going beyond the menu and the browser screen with an odd top indent. Below is the code I have written: * { margin: 0 ...

htmlcssflexboxposition

Top-notch loading icon using jquery

Recently, I embarked on the journey of learning Javascript and jQuery simultaneously, and to my surprise, it feels quite manageable. As I delve deeper into creating functions, I am currently working on displaying a loading image. While I initially used on ...

jquerycsshtml

Customized placement of form fields on an HTML grid determined by the user

My goal is to organize input elements on a grid based on user preferences. After researching, I stumbled upon CSS grids, which seem promising. I am considering creating a CSS grid with r rows and c columns, then using JavaScript to assign input elements t ...

javascripthtmlcssformsvue.js

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

javascriptjqueryhtmlcss

Tips for aligning objects within a bootstrap column so that they all have the same starting point on the X axis

To recreate the issue I am facing, I created a basic HTML structure with 2 bootstrap columns. My aim is to have multiple <p> elements in the second column, stacked one below the other. However, the problem arises when these <p> tags contain tex ...

htmlcsstwitter-bootstrapbootstrap-4flexbox