How to show page loading without javascript?

I'm in the middle of re-building our website for users who don't have javascript enabled (surprisingly high percentage of our visitors).

What is the best way to show a user that something is loading without using javascript.

Background: Our login has to search for an email server before it logs someone in, it can sometimes take 5-10 seconds, sometimes up to twenty.

Current Thinking: I should reload the landing page with a new button that says loading and a loader icon and then redirect that to a page that actually does the logging in with header

Just realized I can't do this because the php reload has 开发者_C百科to be before anything is displayed on the page.

Any ideas? Perhaps there's onclick CSS I can use?

Could I create a hidden form and then submit the form w/ php once the operations are finished?

Browsers usually don't wait to receive the entire page before displaying it. So your script could echo the page headers and the beginning of the page, and display a message telling to wait the page finish to load, then display the rest of the page, according to the success or not of the authentication. At the end, there could be a javascript redirection, with an alternate redirect link for those who javascript isn't activated.

You could also try using meta refresh tag. Each time the page is reloaded, the script could check if the authentication is done.

It's not really possible in the "traditional" sense of popping up a spinning 'loading' icon, since javascript is the only way to manipulate the current page without refreshing. CSS is only used for presentation, and doesn't have any way to know if a button has been clicked. And if most of your users are on IE, there's not much chance of the more 'advanced' CSS features working, anyway.

All of that said, your initial thought would work (on further thought, maybe not?). Use a landing page with a loading icon and "please wait" text, which includes the login logic, then re-direct to the website itself, using a meta refresh (or 302 redirect) with the timeout of 20 seconds (or the approximate maximum value it would take to log someone in).

Combining this with Charles answer would probably work. Display a 20 second time out meta refresh header with the basic loading page, then have the PHP for the login below that in the source file.

for reloading without javascript you can use the meta refresh

<meta http-equiv="refresh" content="5;url=http://example.com/">

the login form will redirect user to some page with the loading message and loader icon, the real url will be loaded after 5 seconds for example
after those 5 seconds, if the login process isn't done yet (some if-else logic in your serverside script), the page with loading message and loader icon will continue to be showed

without javascript you can still do a lot of thing, but it's much trickier
there are even some ajax-without-javascript techniques...