Home/ Questions/Q 7965477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T06:10:06+00:00

What I want is to show Loading… as a simple text while page is

  • 0

What I want is to show “Loading…” as a simple text while page is loading and I want the text to be centered both – horizontally and vertically. I go through a lot of examples and now I have some sort of solution which seems to work, but I have some doubts that the effect will be the same all the time and that my code is even close to a good CSS.
What I have is a index.php page where right after the <body> tag I have this:

<body>

        <div id="loading-standard-user">
            <p id="loading-standard-user-text">Loading...</p>
        </div>

Later on I have a function that take care for hiding the text when page is loaded, but what concern’s me is the styling of the <div> and <p> tags.
Here is my CSS:

#loading-standard-user {
  width: 100%;
}

#loading-standard-user-text {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-family: arial;
  top: 50%;
  margin-top: -40px;
}

I’m pretty sure that I have some unnecessary code and at the same time I miss something, one thing that I wonder is that my font-size: 40px which would have to mean that if I want my code to be vertically centered later on my margin-top should have value equal to half the size of my font, but visually it looks centered when margin-top is with the size of the font.
Anyways any thoughts on the styling and where are my mistakes and how could I do it right?

Thanks

Leron

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your CSS code seems to do almost exactly what you want. The only problem with it that I can find is that your margin-top should be -50% of the height. Your div height is 40px (which is the font size), so your margin-top should be -20px to center it exactly.

    In more detail: top: 50% sets the top of the text halfway the container. Then margin-top: -20px moves it up 20px to center it.

    Edit:
    If you want to use em, like suggested by @mgibsonbr, try the following CSS:

    #loading-standard-user {
  position: fixed;
  width: 100%;
  height:40px;
  top: 50%;
  margin-top: -2em;

}

#loading-standard-user-text {
  width: 100%;
  text-align: center;
  font-size: 4em;
  font-family: arial; 
}
    • 0