What is the best way to incorporate a Bootstrap spinner icon in the center of a webpage's background?

Every time my HTML page reloads, I want to display a background loader icon. Although I have tried using the Bootstrap spinner icon, I'm facing difficulties in positioning it at the center of the page.

<html>
<style>
  .overlay {
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    opacity: .5; 
    filter: alpha(opacity=50); 
    display: none;
  }
</style>
<body>
<div class="overlay">
  <div class="d-flex justify-content-center">  
    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>
<!-- main content goes here -->
<!-- main content goes here -->
</body>
</html>
htmlcss

Answer №1

For proper display, ensure you remove the display: none property and adjust the top position as shown below: 

 .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 40%;
    left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
 }
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <div class="overlay">
      <div class="d-flex justify-content-center">  
        <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
    <!-- main content goes here -->
  </body>
</html>

Answer №2

To center the content, remember to add the class "align-items-center" to your code.

<div class="overlay d-flex justify-content-center align-items-center">
  <div class="">  
    <div class="spinner-grow text-primary" role="status" style="width: 3rem; height: 3rem; z-index: 20;">
      <span class="sr-only">Loading...</span>
    </div>
  </div>
</div>

Answer №3

This method is simple and effective for me :)

HTML

<div class="loader">
  <div class="spinner" role="status">
  </div>
</div>

CSS

.loader {
 height: 100vh;
 display:flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

JS Fiddle Demo: https://jsfiddle.net/36xrf9mp/5/

Answer №4

This is the answer for styling with CSS:

    .overlay {
        background-color: #EFEFEF;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        opacity: .5;
        filter: alpha(opacity=50);
    }

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

"Enhance your website's loading speed with the Google Page Speed Up

Hi, I've been using the Google PageSpeed Module and have created a .htaccess file to optimize my website (www.anetoi.com). I tried using combine_css to merge my CSS files but it didn't work as expected. I followed Google's instructions but s ...

cssperformance.htaccessweb

What is the best way to transfer information between two React.js files?

I am currently finding it inefficient to pass data from App.js to another .js file within React by constantly reading and writing from local storage. I would prefer to only retrieve data from local storage once when the App.js component mounts. App.js: ...

htmljsonreactjsdomlocal-storage

jQuery DataTables covering a CSS-anchored menu bar

My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...

javascriptjqueryhtmlcssdatatable

Encountering an issue when attempting to store image links in the database using PDO

One idea that I have is to create an image uploader system that sends the image to the 'upload' folder and saves the link to the database. I encountered errors in my 'images.php' file. Can anyone assist me with resolving these issues? ...

phphtmlajaxfile-uploadpdo

Utilizing Wordpress post images to dynamically change background URLs in CSS

Is there a way to dynamically set a background image in CSS using PHP, specifically the Wordpress post image? background: <?php if(has_post_thumbnail()){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'dest ...

csswordpresswordpress-themingthumbnailscustom-wordpress-pages

What exactly is the hashtag text and what is the best way to eliminate it?

While working with Bootstrap, I encountered a strange issue where an unknown element with the id of "text" appeared out of nowhere. When I view the page in my browser, there are #text elements appearing between each <li> elements. Upon inspecting the ...

html

Utilizing jQuery to dynamically pass parameters to the YouTube API

When making a request to the YouTube API, I am structuring it as follows: $.get("https://www.googleapis.com/youtube/v3/channels", { part: "contentDetails", id: "somestring", key: "MY-API-KEY" } /*, ...*/ ) A hidden field contains the value id ...

javascriptjqueryhtmlyoutubeyoutube-api

Prevent VSCode from highlighting my Dust / HTML code in green after the "#" symbol

When viewing my Dust templates in VS Code, I noticed that on one of my computers, the code turns green after a "#" symbol as if it's commented out. For example: <div id="someDiv"> Some text <#someThing> <div id="anotherD ...

htmlvisual-studio-codedust.js

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

javascripthtmlvue.js

Retrieve SQL data and store it in a JavaScript variable

Need assistance with fetching data from SQL and storing it in a JavaScript variable. I have already connected PHPMyAdmin to my website. I am attempting to retrieve two variables (date) from my SQL table. JAVASCRIPT: var countdown_48 = new Date; countdow ...

javascriptphphtmlsqldatabase

What could be causing my jQuery handler to not capture my form submission?

I am developing a Ruby web application and using JQuery and AJAX to send/receive data. However, I am facing an issue where pressing the enter key does not submit the form. What should I do to ensure that my form submits successfully? Within my Foundation ...

javascriptjqueryhtmlajaxforms

CSS hover effect applied uniformly to all link children

Here is the HTML code snippet I am working with: <a href="">Bioshock 2<span> - Xbox 360 review</span></a> My goal is to style the first part of the link differently from the span. The desired styling should look like this: https: ...

css

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

cssreactjstypescriptnext.jstailwind-css

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

htmlcss

Placing a gradient background in front of two divs

I have created two divs with gradients: .container_middle_page{ margin: auto; height: 100%; display: flex; flex-direction: column; } .container_middle_page_up{ background-image: linear-gradient(to top, #F28118,white); height: ...

htmlcssbackgroundgradient

What is the best way to eliminate the blue-box-fill when buttons are clicked?

Check out this screen recorded gif on my device showcasing the blue-box-fill I'm referring to: https://i.stack.imgur.com/ajr2y.gif I attempted the following solution: * { user-select: none; -webkit-user-select: none; /* Safari */ -khtml-user-s ...

css

The SpringMvc tiles are failing to display the header and footer

One of the main components in my project is a file called tiles.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE tiles-definitions PUBLIC "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN" "http://tiles.apa ...

javacssspringjspspring-mvc

jQuery does not support CSS pseudo-code

I'm having trouble with my CSS pseudo-code not being recognized by jQuery. Here is the code I'm using: CSS: h1 { background: red; width: 100px; display: inline-block; } h1:after { content:" | "; background:blue; display ...

jquerycss

Trigger the animation of a Div element when the cursor hovers over a different Div

I am interested in creating an animation where one div moves when the mouse hovers over another div elsewhere on the page. Here is an example... CSS #blue-box { position:absolute; margin-left:50px; margin-top:50px; height:100px; width:100px; background-c ...

jquerycsshoverjquery-animate

Universal HTML form validation with a preference for jQuery

Is there a jQuery plugin available for form validation that follows the most common rules? Specifically, I need to validate based on the following criteria: All textboxes must not be empty If the 'Show License' checkbox is checked, then the &a ...

javascriptjqueryhtmljquery-plugins