Create a loading page using HTML5 , CSS3 and jQuery

Image Source

Repository

 https://github.com/jquery/jquery 

What Will I Learn?   

I will learn how to create a loading page using HTML , CSS and jQuery to as a waiting page if the connection is compressed.

• How to use the setInterval method to do something every at any given time.
• How to stop the interval by the clearInterval method.
• How to modify the CSS propriety by the css method.
• How to modify an HTML element from the jQuery using HTML method.
• How to show an element by the slideDown method.

Requirements   

• Knowledge about HTML5 and CSS3
• Knowledge about jQuery
• A text editor like notpad ++

Difficulty       

• Basic      

Description   

In this tutorial we will create a loading page using HTML5 , CSS3  and jQuery .

HTML File : 

To create the loading page we need something to be filled or time or anything that indicates waiting, for that I have designed a bar to be filled from the 0 to 100% , and these are my elements : 

Heading H2 :

Is a title contains the word Loading .. , in the center of the page with the white color to be clear.

Div with class ' bar ' :

This is the div to be filled, I gave a 600px to this div with the white border and a small height to be a bar.

Span with class ' full ' :

The span has by default the ' display : inline ' propriety , I changed it to block so that I can change the properties , I gave to it the white background and a 0px width and when the page is loaded it will start from 0 to be 600px.

Span with class ' pour ' :

This span will show the percent from 0% to 100% .

Heading h3 : 

This is the sentence will be shown when the percent up to 100%.

My code : 

<h2>Loading ..</h2>

    <div class="bar">

        <span class="full"></span>

    </div>

    <span class="pour">

        0%

    </span>

    <h3>Welcome Username</h3>

CSS File : 

I used the CSS to modify the proprieties of some elements , to change the colors , backgrounds , border , fonts ..etc 

body{

    background-color: #333;

    text-align: center;

}

h2{

    font-size: 60px;

    color: #fff;

    font-family: 'arial';

    margin-top: 200px;

    margin-bottom: 60px;

}

.bar{

    margin: 0 auto;

    border: 1px solid #fff;

    height: 20px;

    width: 600px;

}

These are some elements , for example for the body I gave to it the background color : #333 , and the text align to the center .

This is the result of my loading page before and after using CSS : 

And after I added some proprieties to get the best form of the loading page : 

jQuery File : 

 I have used firstly the 3.1.1 version of jQuery , which possesses  distinctive properties , then I created my plugins jQuery file . 

 - I used the $(function(){}); which means when the page is loaded the content inside the function will be executed. 

- I defined two variables the left and right by the symbols ' myInterval and width ' .

- I used the setInterval() method , this method has two parameters , the first is a function to do and the second is a number of milliseconds to be reloaded every this number.

myInterval = setInterval(function () {// something to do }, 300);

Every 300 milliseconds the system will execute the function .

- For the loading page I will add 1 to the width because I will fell the bar by the span , and by default the width of the span is 0 I will increase it to be 600px .

width = width + 1;

I added 1 to my width variable that I initialized by 0 , every 300 milliseconds will be +1.

$('.full').css('width', width * 6);

I selected my span which has the class .full and I changed the width of it , the width will equal to the value of my width variable multiply by 6 , because my width will be [0,1,2,3,4, .. 100] and the width of the bar is from 0 to 600px I must multiply it by 6.

$('.pour').html(width + '%');

By this code I will show the result of the width for example if it's 1 it will be 1% like it in the span that has the class .pour

I will now stop this interval when the width equals to 100 .

if (width === 100) {

    clearInterval(myInterval);

}

So if the width equals to 100 I will use the clearInterval() method and pass the interval or the variable of the interval to stop the operation.

Then I want to show something when it equals to 100% for that I need to use the slideDown() method to show my welcome sentence .

$('h3').slideDown();

You can for example redirect the person to another page when the operation finished or show an alert ..etc.

Video Tutorial   

Curriculum   

•  Create a slideshow using HTML5 , CSS3 and jQuery
•  jQuery Tutorial #01 Mouse Events (Click , dblClick, mouseEnter, mouseLeave, mouseOver and Hover)

Proof of Work Done

https://github.com/alexendre-maxim/loadingPage