Progress Bar Wanted

[Name Trader]

I have a website where 1 page loads a largish database and consequently takes rather a long time to load (up to a minute). I'd like to have a nice looking progress bar installed whilst the page is loading (rather than the database loading). Of course the progress bar should dissappear when the page has loaded.

I want to see examples of your work. I don't really mind what language you use to perform this. But HTML5/CSS3 would be my preferred choice, with any provisos for browser compatibility.

You will not get access to my website. I need just the code which I can install on my website. I don't mind a tailor-written or canned solution, just as long as it's a nice looking progress bar.

I can't really afford a lot of money to do this, so my budget would be $10-$20. Payment after it is seen successfully running on my website.

 

[aween]

With instructions:
http://www.codeproject.com/KB/scripting/loadingbox.aspx

 

[Name Trader]

Thanks xlusive, but you have to login to download that code. This might not be a biggie for you, but I just hate logging into a website for a one-time only deal, which I might not even use.

On another note. I found something I like here... http://www.catswhocode.com/blog/how-to-create-a-kick-ass-css3-progress-bar#comment-384407. All I need to know is how to erase the Hello World box, and I will implement it on my website. Any ideas how to do this?

 

[Irieman]

Simple, just emove the following from the HTML file:

		<div class="content" id="main_content" style="display: none;">
	    	<p>Hello, World!</p>
	  	</div><!-- #main_content -->

and this from the javascript file:

 $('#main_content').slideDown();

 

[Name Trader]

That simply removed the Hello World! But the bar remained on screen. I want to remove the entire bar/box from the screen, after it gets to 100%.

 

[Irieman]

That simply removed the Hello World! But the bar remained on screen. I want to remove the entire bar/box from the screen, after it gets to 100%.

Sorry, I miss understood... Here you go just replace the last part of progress.js and you are good:

$(function() {
  // Hide the label at start
  $('#progress_bar .ui-progress .ui-label').hide();
  // Set initial value
  $('#progress_bar .ui-progress').css('width', '7%');

  // Simulate some progress
  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          // Hide progressbar
	  $("#container").hide();
        });
      }, 2000);
    });
  });
  
});

 

[Name Trader]

That worked great in my test. Thanks. Now to put it in a real situation

 

[Irieman]

You are welcome