Steps for displaying text underneath a rotating image

In an attempt to display text below a loading image, I encountered alignment issues in different browsers. Screenshots of the layout on Chrome and IE are provided for reference.

Below is the HTML code snippet utilized:

.LoaderwithText {
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  top: 50%;
  left: 50%;
  white-space: nowrap;
}

.loader {
  border: 12px solid #f3f3f3; 
  border-top: 12px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -ms-animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  opacity: 0.5;
  position: absolute;
}

#LoaderText {
  Color: black;
  font-size: 14px;
}


@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(-360deg);}
}
<div class="LoaderwithText">
  <a class="loader"></a>
  <p id="LoaderText">Deleting...</p>
</div>

A question arises regarding the missing styles that would ensure consistent behavior across all browsers.

IE Screenshot

Chrome Screenshot

htmlcss

Answer №1

To properly center the content when using flex, it is important to size the container accordingly:

You can also center an Absolute element by adjusting its coordinates and using margin if its dimensions are fixed.

.CenteredLoader {
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  /* update*/
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}

.loader {
  border: 12px solid #f3f3f3;
  /* Light grey */
  border-top: 12px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 80px;
  height: 80px;
  -ms-animation: spin 2s linear infinite;
  -webkit-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  opacity: 0.5;
  position: absolute;
  /* update*/
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

#LoaderText {
  Color: black;
  font-size: 14px;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
<div class="CenteredLoader">
  <a class="loader"></a>
  <p id="LoaderText">Loading...</p>
</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

Align the text vertically within a list item

<ul style="text-align: center;"> <li style="margin: 0; padding-bottom: 23px; font-size: 32px; vertical-align: middle;"> <div style="font-family: 'Arial','sans-serif'; color: black; font-size: 17px;">[%code1%]</ ...

cssinlinevertical-alignmentlistitem

Is there a way to prevent this from moving and have it only load below?

Is there a way to prevent an input box from altering the size of an HTML <li> element when it is revealed beneath item 2? Additionally, how can one ensure that the input box opens directly below item 2 without affecting the layout? Lastly, what adj ...

jqueryhtmlcss

What are the steps to design a curved gauge with a linear-gradient background?

Looking to create a fully responsive gauge using only CSS, ranging from 0-100% with a gradient color transition from green to red. After encountering issues with existing examples, I conducted tests and ultimately developed a solution that somewhat meets t ...

htmlcssborderlinear-gradients

Which alternative function can I use instead of onchange without having to modify the slider beforehand in order for it to function properly?

Check out my website: alainbruno.nl/form.html to see the "Race" form and the "Age" slider. I've noticed that the minimum and maximum values of the Age slider only update correctly when you first use the slider before selecting a different race. Any id ...

javascripthtmlformsfunction

The scrolling behavior varies in Firefox when using the mouse wheel

Currently, I am working on a website where I want to display large text on the screen and have the ability to scroll two divs simultaneously. This functionality is already in place. I can scroll the divs, but I'm facing an issue with the jumps being t ...

javascriptjquerycssfirefoxscroll

The car glides smoothly across the screen from left to right before disappearing from view

I'm looking to create an animation where a car moves from left to right and then switches to another image moving from right to left. Can anyone provide assistance with this task? Here's the code I have so far: .car-movement { position: a ...

htmlcss

Line breaks showing up on the page that are not present in the HTML source code

Why are unwanted line breaks appearing in my rendered DOM that are not in the source code, causing the content to be displaced? And how can I resolve this issue? Below is the code snippet: <div class="float-left" style="position:relative;left:15px"> ...

htmlbootstrap-4markdownhexo

Disabling Hover effect on a particular element

Is there a way to eliminate the hover effect on my 'h3' tag (lighter grey hover effect), while keeping it as a link inside my 'a' tag? .speakers a { color: var(--clr-grey); } .speakers a:hover { color: var(--clr-lgrey); } &l ...

htmlcss

Is it feasible to capture a screenshot of a URL by using html2canvas?

Is it possible to take a screenshot of a specific URL using html2canvas? For example, if I have the following URLs: mydomain.com/home mydomain.com/home?id=2 mydomain.com/home/2 How can I capture and display the screenshot image on another page? window ...

javascriptjqueryhtmlcsshtml2canvas

Using Selenium in Python, identify and choose a class

Hello, I am currently working on automating a process using selenium, python, and GLPI. I have been struggling with selecting a user from a menu bar, despite trying various methods like linkText, cssSelector, and xpath. I suspect I may be doing something w ...

pythoncssseleniumwebdriver

Establishing a secure HTML5 websocket connection in a webworker on Chrome version 61

Currently, I am utilizing code to establish a secure websocket connection from a web worker. Strangely, it is functioning perfectly in Chrome 60 but encountering issues in Chrome 61. On the contrary, it works seamlessly in other browsers such as IE, Firefo ...

htmlgoogle-chromewebsocketweb-worker

Displaying a random div using javascript

Seeking a way to display random divs on my webpage, I came across a stackoverflow solution: Showing random divs using Jquery The recommended code can be found here: http://jsfiddle.net/nick_craver/RJMhT/ Despite following the provided instructions, I am ...

javascripthtml

Tips on creating a horizontal scrolling effect using the mouse

Is there a way to enable horizontal scrolling by holding down the mouse click, instead of relying on the horizontal scroll bar? And if possible, can the scroll bar be hidden? In essence, I am looking to replicate the functionality of the horizontal scroll ...

javascriptjqueryhtmlcss

Align the form and button HTML elements in the center of the page horizontally

I have been utilizing bootstrap for the styling of my page. However, I have successfully centered other elements vertically and horizontally, except for the input field and button. The input field and button are currently being displayed on the left side ...

htmlcssbootstrap-4

Searching for the name of dynamically generated input fields using jQuery

I have a straightforward form featuring radio buttons <form> <input type="radio" name="radio_1" value="1" />Radio 1 <input type="radio" name="radio_1" value="2" />Radio 2 <input type="radio" name="radio_1" value="3" />Radio 3 </ ...

javascriptjqueryhtml

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

javascripthtml

Array of materials for ThreeJS GLTFLoader

Attempting to load a model using GLTFLoader and apply different colors for each face of the object (cube) using a material array is not functioning as expected. var materials = [ new THREE.MeshPhongMaterial( {color: 0x552811,specular: 0x222222,shininess: ...

javascripthtmlthree.js

Firefox only loads images and jquery after a refresh of the page

Upon initially accessing my site after clearing the cache (a jsp page from a spring app), I noticed that the images and styles were not being applied. However, upon refreshing the page (ctrl-r), everything loaded perfectly. In Firefox's console outpu ...

javascriptjquerycssjsp

How to send varying URL parameters to AJAX function within Django applications

Can anyone assist with passing different URL names to a javascript function? Below is the HTML and Javascript code I am using: {% for profile, g_name in group_list %} <li class="contact"> <div class="wrap"> ...

javascripthtmldjangoajax

Does renaming a page to index.html have any impact?

After restarting my laptop, everything was back to normal. Thank you for the help and replies. The issue I'm facing is with two identical pages that have the same code. The only difference between them is the file names - index and index2. However, f ...

htmlcssindexing