PDA

View Full Version : Website Loading Bar


Nick.
10-08-2006, 07:12 PM
Hey,

I was wondering how to make a loading bar appear whilst the page is loading. Example;

Page background is white with this loading bar:
http://www.uploadz.co.uk/519304loading_bar.gif
and I want it to disappear as soon as the whole page has loaded and then the page appear.

In other words;
I don't want the page to appear until it has totally loaded, I just want the loading bar.

Thanks in advance,
Nick
uber
10-08-2006, 07:15 PM
I would also love to know, +rep to anyone who helps.
Sygon.
10-08-2006, 07:24 PM
Ajax...
:Lively
10-08-2006, 08:10 PM
theres a script of dynamic drive, 2 mins ill find it
:Lively
10-08-2006, 08:28 PM
ok, i found this, put it at the top of your page. (havnt tested it btw, and apparently its a very simple script)


<script language="javascript" type="text/javascript">
function showpage() {
document.getElementById('loader').style.display = "none";
document.getElementById('main').style.display = "block";
}
</script>
</head>
<body onload="showpage();">

srri if it dusnt help
Per
10-08-2006, 08:48 PM
Or just do a simple flash dynamic loader?
That way you can intergrate an intro at the same time :D
Kymux
10-08-2006, 09:00 PM
I'd stick with the script. Involving flash just confuses things.
Per
10-08-2006, 09:22 PM
Not if you follow a tutorial? theres quite a few easy ones out there
Nick.
10-08-2006, 09:24 PM
Not if you follow a tutorial? theres quite a few easy ones out there
Finding them is the problem for me ;]
Liam.
10-08-2006, 09:33 PM
Could have the loading bar then put a redirect to the next page in a certain amount of seconds?
ClubTime
10-08-2006, 09:45 PM
Try this:



<html>

<head>
<meta http-equiv=\"Refresh\" content=\"3; URL=Your Site here\"><p align="center"><font face='verdana' size='1' color='000000'>The Site is loading. Please
be patient..<br><br>
<img alt="" src="http://www.uploadz.co.uk/519304loading_bar.gif" border="0"></font><body><font size="1"><br>
<br>
Loading...</font></p
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Your Site</title>
<style>
<!--
.page
{
color: #000000;
}
.tborder
{
background: #ECFEDA;
color: #000000;
border: 1px solid #000000;
}
td
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.alt1
{
background: #ECFEDA;
color: #000000;
}
p
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
-->
</style>
</body>

</body>

</html>


Havent tested it, but it work make sure you change YOUR SITE HERE to the page you want it to go to.
Nick.
10-08-2006, 10:42 PM
Could have the loading bar then put a redirect to the next page in a certain amount of seconds?


Try this:



<html>

<head>
<meta http-equiv=\"Refresh\" content=\"3; URL=Your Site here\"><p align="center"><font face='verdana' size='1' color='000000'>The Site is loading. Please
be patient..<br><br>
<img alt="" src="http://www.uploadz.co.uk/519304loading_bar.gif" border="0"></font><body><font size="1"><br>
<br>
Loading...</font></p
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Your Site</title>
<style>
<!--
.page
{
color: #000000;
}
.tborder
{
background: #ECFEDA;
color: #000000;
border: 1px solid #000000;
}
td
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
.alt1
{
background: #ECFEDA;
color: #000000;
}
p
{
font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
-->
</style>
</body>

</body>

</html>

Havent tested it, but it work make sure you change YOUR SITE HERE to the page you want it to go to.

That's more useless then the glass in a window painted black. Cos, once it has redirected the page still has to load. :l

Nick
Sygon.
11-08-2006, 10:48 AM
Work it out like something, you display your loading bar in one div. and your site in another but the sites div display is hidden, then after a set time the sirte div is shown and the loading bar is not.
Mentor
11-08-2006, 12:13 PM
Javascript have just the load bar shown and positioned by css and the page done in a hidden div. Then onload change em over, to show the proper page and hide the loader. Like habbo mike 2005 said.
Tomm
11-08-2006, 12:16 PM
You would use javascript to hide a div layer that covers the whole page until the page has loaded, This is part of the next version of RadioPanel, but I dont give my source away ;)
ClubTime
12-08-2006, 03:37 PM
That's more useless then the glass in a window painted black. Cos, once it has redirected the page still has to load. :l

Nick

Well sorry for trying to help
Recursion
13-08-2006, 07:46 PM
You would use javascript to hide a div layer that covers the whole page until the page has loaded, This is part of the next version of RadioPanel, but I dont give my source away ;)

oh cmon giving out that loading bar thingy will hardly help someone to steal your RP!
Mentor
13-08-2006, 07:57 PM
I think the codes been provided 3 times here already anyway "/
Recursion
13-08-2006, 08:09 PM
yup. How would i use this for my Joomla! Powered site anyway. Because it always seems to mess up if i edit the files.
Josh-H
13-08-2006, 08:14 PM
ok, i found this, put it at the top of your page. (havnt tested it btw, and apparently its a very simple script)



srri if it dusnt help

Link to dynamic drive page plz
Mentor
13-08-2006, 08:17 PM
Link to dynamic drive page plz

Why anyone with an iq of 3 could have put that simple script together.

Next you'll be wanting everyone to link to W3 when they use the <strong> tags...
Josh-H
13-08-2006, 09:06 PM
Why anyone with an iq of 3 could have put that simple script together.

Next you'll be wanting everyone to link to W3 when they use the <strong> tags...

Oh be quiet, another example of someone who knows everything.
Call
13-08-2006, 09:11 PM
www.dynamicdrive.com lols.
ClubTime
14-08-2006, 12:06 PM
Why anyone with an iq of 3 could have put that simple script together.

Next you'll be wanting everyone to link to W3 when they use the <strong> tags...

ROFLMAO!!

Sorry i'm in a hyper mood today :)
Nick.
14-08-2006, 01:21 PM
I've done it with a very simple script thanks to Nets ;]

Thread Closed.

Want to hide these adverts? Register an account for free!