Ways to center a spinner on the screen using CSS during loading

Upon loading the page, my spinner appears in the center of the screen after a second. However, in the initial frame of the page, it is not centered but positioned on the top-left corner instead. How can I ensure that my spinner starts off centered from the beginning? Centering the loader itself is not an issue for me, I just want the spinner to begin in the middle of the page. I have searched for similar problems but none seem to match mine precisely. Below is the CSS code I am using:

.loader {
  /*left: 50%;
  position: fixed;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999;*/
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

html:

<div class="loader">
    <img src="../../../../assets/content/Amsa-loading.gif">

  </div>
htmlcssangulargif

Answer №1

Test it out!

<div class="spinner"></div>

.spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer №2

To achieve the desired effect, I opt for using a background instead of an img tag:

.spinner{
     height:100%;
     width:100%;
     background:url(/assets/images/spinner.gif) no-repeat center center;
     position:absolute;
     z-index:10;
}

Next, in the HTML code:

<div class="spinner"></div>

Finally, in my website's CSS, I ensure that the div is hidden once the CSS has loaded.

.spinner{display:none;}

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

Having Trouble with Click Function: Loading Pages into Div using Jquery/Ajax

Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...

javascriptphpjqueryhtmlajax

Utilize Python to extract a table from an HTML document

I would like to retrieve a table from an HTML file. Below is the code-snippet I have written in order to extract the first table: import urllib2 import os import time import traceback from bs4 import BeautifulSoup #find('table',{'class&ap ...

pythonhtmlcsvbeautifulsoup

Tips for switching the status of each item as I navigate the page with the tab key

I am facing an issue with my list of items that have hidden content appearing on hover. I want to achieve the same functionality while tabbing through my page, but currently, all hidden content appears at once. Check out a live example of my code here jQ ...

javascriptjqueryhtmlcss

In a multidimensional array, locate the key corresponding to the specified value

I am facing an issue with my code that involves an array containing various fruits with product ID and price as keys for different values. While I am able to retrieve the correct price, I am struggling to get the name of the chosen product. For instance, ...

phphtml

Creating multiple copies of a form div in Angular using Typescript

I'm attempting to replicate a form using Angular, but I keep getting the error message "Object is possibly 'null'". HTML: <div class="form-container"> <form class="example"> <mat-form-field> ...

angulartypescriptformsclone

Styling the <Autocomplete/> component in Material UI with React to achieve rounded corners

Google's search bar has always been a favorite of mine, with its rounded corners and generous text padding. https://i.stack.imgur.com/UbKrr.png I'm attempting to replicate this aesthetic using Material UI's <Autocomplete/> component ...

javascriptcssreactjsnext.jsmaterial-ui

Two distinct arrays interacting and syncing with each other through a single API request

I find myself in a strange situation. I am dealing with two objects: sessionBase: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; sessionDisplay: ISessionViewWrapperModel = <ISessionViewWrapperModel>{}; After making an api call, both ...

arraysangularapifilter

What is the method to conceal an element after detecting and locating a specific class using jQuery?

Can someone please assist me today with the following task: Step 1: <div id="htmlData"> <div class="col-md-12"> <div class="pull-left"> <h3>Report: <strong>Travel </strong></h3> ...

javascriptphpjqueryhtmlcss

Iframes are not compatible with JQuery UI dialogs

After attempting to open a URL within an Iframe in a JQuery dialog box, I encountered the following issue: Here is the code snippet that I used: http://pastebin.com/Wqf0mGhZ I am looking for a solution to make sure that the dialog displays all of the con ...

javascriptjqueryhtmliframejquery-ui-dialog

Selenium and PhantomJS are having trouble interpreting JavaScript code

Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...

javascriptjavahtmlseleniumphantomjs

What are the steps for applying a Bootstrap class to an element?

I keep encountering this error in the console: Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('si col-md-4') contains HTML space characters, which are not valid in tokens. Below is a ...

javascriptjqueryhtmltwitter-bootstrapfirebase

Tips for keeping div and input tags selected even after a user clicks

I am working on a quiz script and I am trying to customize it so that when a user clicks on the div or input tags, they remain selected with a different background color. Currently, I have achieved changing the background color of the div when clicked, ...

htmlcssformsinputlabel

Modify the transparency of a form's backdrop without affecting the input fields

I'm attempting to achieve a similar effect as shown in this example on my website form. I've tried using opacity to make the form field background only 20% visible, but it ends up affecting the text inside and when typing. Is there a way to apply ...

cssopacity

Steps for converting a JSON response into a .json file.Steps to transform a

I am looking to create a .json file within my local project directory. My goal is to store the response from a fetch API call, which is an array of objects, into a .json file. Here is the code snippet I am working with: ts : getRecords(){ this.serv ...

javascriptjsonangular

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

Animate your SVG with CSS using hover effects that originate from the center of the SVG

I successfully implemented this animation using GSAP and you can view the Codepen for reference: https://codepen.io/whitelionx/full/vYGQqBZ const svgs = document.querySelectorAll("svg"); svgs.forEach((svg) => { const tl = gsap .timelin ...

cssanimationsvghover

Menu options moved to the right of the screen

I am encountering a small issue with my dropdown menu that I can't seem to solve. The first item in the dropdown menu appears correctly, but the second item is slightly shifted to the right. It seems like the margin-right applied to the link may be c ...

csscss-position

Manipulating parent based on first child using CSS

Is it possible to manipulate the parent element using CSS based on the presence of a specific child? For instance, I want to style a table cell differently if the first child within it is a link. <td>Hello</td> <td><a href="go.html"& ...

css

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

What is the best way to handle API requests within an Angular component?

I am currently diving into the world of Angular at my workplace, even though I do not have a background in web development. One challenge I am facing is how to encapsulate API calls within one of my components without knowing where to begin. The componen ...

angulartypescriptweb