Create a loading page using HTML5 , CSS3 and jQuery

Repository

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

Proof of Work Done

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