How to create a progress dialog when switching the webpages?


Tags: javascript,html,css

Problem :

Let's say when user click on a button and the webpage will direct to another webpage, between the loading and waiting of the webpage, I want to show a progress dialog (something like a animated spinner) and it will disappear after another webpage is fully loaded.

How am I going to do such thing by using HTML, Javascript and CSS? At the first webpage I know how to do but I have no idea how to show the progress dialog immediately when the second webpage is being loaded. Any idea? Example is most welcome!



Solution :

It's easy to do if you use some jQuery With a file structure like this:

  • firstpage.html (contains link to other page)
  • secondpage.html
  • js (directory)
    • yourscript.js
    • jquery.js

Include <script src="js/jquery.js></script> and<script src="js/yourscript.js></script> in secondpage.html. Add this to secondpage.html:

<div id="loading_screen"></div>

And the CSS

#loading_screen {
width: 100%;
height: 100%;
background: /*any image, color, w/e*/;
}
/* don't forget that if you want the loading screen to fit full page,
* you'll have to set body, html to margin, padding = 0 & width, height = 100% */

In yourscript.js (the important part):

$(document).ready(function() {
var loadingscreen = $('#loading_screen');
var timeToLoad = 1000; /* in miliseconds, 1000 = 1 second */

setTimeOut(function() {
loadingscreen.hide();
// or if you prefer removing it completely from the DOM: loadingscreen.remove();
}, timeToLoad)

});

    CSS Howto..

    How to make width grow slowly when I add element?

    How to draw a shape using a piece of image in php

    CSS: How can i divide a border into two lines? [duplicate]

    How to fix every element on the same position, when browser is resized?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    Grails: How do I use the resources plugin to add a CSS “link” tag into the head?

    Jquery how to change your website background?

    How to change the color of Bootstrap links

    How to link an external stylesheet in CSS

    Why does an absolutely positioned child expand container height and how to prevent this?

    CSS: How to add borders of different colors to input radio buttons labels?

    How to cancel a CSS style set by 'hover child' selector on event?

    How to stop a timeOut animation that contains multiple timeOut animations within

    How to put 3 of these tables into the correct spot with CSS

    How would you go about placing li in different divs?

    Position:Absolute; Div is making the page too wide and adding blank space to the side. How do I reduce its size?

    How to css style flexible elements to match their parents

    Any ideas how to display divs vertically in bootstrap container?

    How to set a div's position inside another div to bottom right corner?

    How do I achieve my bootstrap nav design?

    How to center a text nav bar with CSS

    how to target IE 6 AND IE7 in css

    How i can force my div to display in block?

    How to pass array from method to property using PHP

    How to draw diagonal lines with css [duplicate]

    How to generate image background that flips with each duplication in css? [duplicate]

    How can I show a element on my site when hovered with only JS?

    How to move the POV of an image when using overflow: hidden?

    How to vertically align lists when one li is a div

    How to add padding to anchor tags in Top Bar in Foundation 6?