0

I have created a slideshow page of large file pictures using HTML5 and CSS. The problem is they take about a minute to load. If the images haven't completely loaded the slide show will not go to the next slide.

I want to add a progress bar that the user sees while it loads in the background.

This is the base of the code:

http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/

Any suggestions?

I have very limited JavaScript knowledge which is why i'm trying to find HTML5 and CSS3 answers.

James
  • 33
  • 1
  • 3
  • 15
  • Google is your friend here. First result for 'javascript progress bar': http://stackoverflow.com/questions/3951903/how-to-make-a-progress-bar – Michael Schuller Dec 04 '12 at 19:57
  • 1
    Please don't expect anyone to reverse-engineer your page. If you put in the effort to show your code, people here will put in the effort to look at it. – Diodeus - James MacFarlane Dec 04 '12 at 19:58
  • I will research again in regards to progress bars and HTML5, there doesn't seem to be a way to get around JS for this. JS is what I'm trying to avoid. Thank you for your responses so far though. – James Dec 04 '12 at 20:04

1 Answers1

1

An idea - if you want to avoid JS, then rotate the image sideways with css3, and crop it so it looks like a progress bar (you could even add CSS filters to make it a color).

as it loads (from left to right instead of top to bottom due to CSS rotation), it will look like a "progress" bar.

no real way to cue when it is loaded without JS.

circusdei
  • 1,967
  • 12
  • 28