Creating a Reusable Page Loader using JavaScript Tutorial

RaidenTheRipper2021 · 2025-02-27T03:20:48+0000

In this tutorial, you will learn how to Create a Reusable Page Loader using JavaScript. The tutorial aims to provide IT/CS students and new programmers with a reference for using JavaScript to develop creative web applications. Here, snippets and a sample web application source code are provided to give you a better idea of how to achieve the goal of this tutorial.

What is a Page Loader?

A Page Loader is a component of a web page that is commonly used to show or display a loading page overlay when navigating, form submission, etc. This component is usually shown with spinners or progress/loading bars. Developers are implementing this kind of component in a web application to let their end-user know that an action, modification, etc are being processed either backend or in the frontend that they must wait before continuing of using the application.

How to Create a Reusable Loader using JavaScript?

Creating a Page Loader in a web application is not that so complicated to achieve. Using a short line of codes using JavaScript, we can create a simple function that triggers the loader to be shown or displayed on the page document. Using CSS (Cascading Stylesheet), we can create and design a simple loader such as a spinner or loading bars.

Step 1: Creating the Loader Design

Assuming that we have the following CSS script for the loader design. The result of the script below is a simple spinner loader in the whole page and displays the loader in the center.

/** Loader Styles */
#preloader

{
position

:

fixed

;
top

:

0

;
left

:

0

;
width

:

calc

(

100%

)

;
height

:

calc

(

100%

)

;
z-index

:

999

;
background

:

#0000008f

;
display

:

flex;
align-items

:

center

;
justify-content

:

center

;
}
#preloader

.lds-ring

{
display

:

inline-block

;
position

:

relative

;
width

:

80px

;
height

:

80px

;
}
#preloader

.lds-ring

div {
box-sizing

:

border-box

;
display

:

block

;
position

:

absolute

;
width

:

64px

;
height

:

64px

;
margin

:

8px

;
border

:

4px

solid

#fff

;
border-radius

:

50%

;
animation

:

lds-ring 1.2s

cubic-bezier

(

0.5

,

0

,

0.5

,

1

)

infinite

;
border-color

:

#00b6ff

transparent

transparent

transparent

;
}
#preloader

.lds-ring

div:

nth-child

(

1

)

{
animation-delay

:

-0.45s

;
}
#preloader

.lds-ring

div:

nth-child

(

2

)

{
animation-delay

:

-0.3s

;
}
#preloader

.lds-ring

div:

nth-child

(

3

)

{
animation-delay

:

-0.15s

;
}
@keyframes

lds-ring {
0%

{
transform

:

rotate

(

0deg

)

;
}
100%

{
transform

:

rotate

(

360deg

)

;
}
}

Step 2: Creating the Loader Element using JavaScript

Next, using JavaScript we will create the loader element that will be used to append to the document body when the page loader is triggered.

/**
* Loader Element Creation
*/
const

loader =

document.createElement

(

'div'

)
loader.setAttribute

(

"id"

,

"preloader"

)
loader.innerHTML

=

`<

div class

=

"lds-ring"

><

div></

div><

div></

div><

div></

div><

div></

div></

div>

`

Step 3: Creating the JS function for showing the Page Loader

Next, we will create a custom JS function that triggers to append the loader element to the document page.

window.start_loader

=

function

(

)

{
if

(

document.querySelector

(

'#preloader'

)

!=

null

)
document.querySelector

(

'#preloader'

)

.remove

(

)
document.body

.appendChild

(

loader)
}

Step 4: Create the JS function for Removes the Page Loader

Lastly, we'll create the custom JS function that checks if the page loader exists on the document and remove it.

window.end_loader

=

function

(

)

{
if

(

document.querySelector

(

'#preloader'

)

!=

null

)
document.querySelector

(

'#preloader'

)

.remove

(

)
}

Copy and Paste both the CSS and Javascript in your sample web application on your end. Then, browse the application on your browser and open the browser developer tools on the sample application tab and navigate to the console panel of the developer tools window. Execute the start_loader() function in the console to show the page loader and the end_loader() function for hiding or removing the page loader.

Example

Here's a sample source code that demonstrates the reusable page loader in a web application.

Page Interface

index.html

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

JavaScript Reusable Loader</

title

>
<link

rel

=

"stylesheet"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"

integrity=

"sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

/

>
<link

rel

=

"stylesheet"

href

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

integrity=

"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"

crossorigin=

"anonymous"

>
<link

rel

=

"stylesheet"

href

=

"assets/styles.css"

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"

integrity=

"sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

></

script

>
<script

src

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity=

"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"

crossorigin=

"anonymous"

></

script

>
<style

>
html, body{
height: 100%;
width: 100%;
}
body{
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
body>nav, body>footer{
flex-shrink: 1;
}
body>main{
flex-shrink: 1;
flex-grow: 1;
overflow: auto;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
}
pre{
min-height:20vh
}
</

style

>
</

head

>
<body

style

=

"background:#eff3fc"

>
<nav

class

=

"navbar navbar-expand-lg navbar-dark"

style

=

"background:#495C83"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"./"

>

JavaScript Reusable Loader</

a

>
<div

>
<a

href

=

"https://sourcecodester.com"

class

=

"text-light fw-bolder h6 text-decoration-none"

target

=

"_blank"

>

SourceCodester</

a

>
</

div

>
</

div

>
</

nav

>
<main class

=

"container-fluid"

>
<div

class

=

"col-lg-6 col-md-8 col-sm-12 mx-auto"

>
<h2

class

=

"text-center"

>

Creating a Reusable Loader using JavaScript and CSS</

h2

>
<hr

>
<div

class

=

"card mt-3 rounded-0"

>
<div

class

=

"card-body rounded-0"

>
<div

class

=

"container-fluid"

>
<div

class

=

"row justify-content-center"

>
<div

class

=

"col-lg-4 col-lg-5 col-sm-6"

>
<div

class

=

"mb-3"

>
<button

class

=

"btn btn-primary rounded-pill w-100"

type

=

"button"

id

=

"show_loader_btn"

>

Show Loader for 10sec</

button

>
</

div

>
<div

class

=

"mb-3"

>
<a

href

=

"./redirect_page.html"

class

=

"btn btn-warning rounded-pill w-100"

>

Redirect Page</

a

>
</

div

>
<div

class

=

"mb-3"

>
<a

href

=

"#"

onclick

=

"location.reload()"

class

=

"btn btn-light border rounded-pill w-100"

>

Reload Page</

a

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

main>
<footer

class

=

"container-fluid py-3"

style

=

"background:#495C83; color:#fff"

>
<div

class

=

"container-fluid my-2"

>
<div

class

=

"text-center"

>
<b

>

JavaScript Reusable Loader ©

2023</

b

>
</

div

>
</

div

>
</

footer

>
</

body

>
<script

src

=

"./assets/script.js"

></

script

>
</

html

>

redirect_page.html

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

JavaScript Reusable Loader</

title

>
<link

rel

=

"stylesheet"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"

integrity=

"sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

/

>
<link

rel

=

"stylesheet"

href

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

integrity=

"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"

crossorigin=

"anonymous"

>
<link

rel

=

"stylesheet"

href

=

"assets/styles.css"

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"

integrity=

"sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

></

script

>
<script

src

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity=

"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"

crossorigin=

"anonymous"

></

script

>
<style

>
html, body{
height: 100%;
width: 100%;
}
body{
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
}
body>nav, body>footer{
flex-shrink: 1;
}
body>main{
flex-shrink: 1;
flex-grow: 1;
overflow: auto;
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
}
pre{
min-height:20vh
}
</

style

>
</

head

>
<body

style

=

"background:#eff3fc"

>
<nav

class

=

"navbar navbar-expand-lg navbar-dark"

style

=

"background:#495C83"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"./"

>

JavaScript Reusable Loader</

a

>
<div

>
<a

href

=

"https://sourcecodester.com"

class

=

"text-light fw-bolder h6 text-decoration-none"

target

=

"_blank"

>

SourceCodester</

a

>
</

div

>
</

div

>
</

nav

>
<main class

=

"container-fluid"

>
<div

class

=

"col-lg-6 col-md-8 col-sm-12 mx-auto"

>
<h2

class

=

"text-center"

>

Creating a Reusable Loader using JavaScript and CSS</

h2

>
<hr

>
<div

class

=

"card mt-3 rounded-0"

>
<div

class

=

"card-body rounded-0"

>
<div

class

=

"container-fluid"

>
<div

class

=

"row justify-content-center"

>
<div

class

=

"col-lg-4 col-lg-5 col-sm-6"

>
<h3

class

=

"text-center"

><b

>

Sample Page</

b

></

h3

>
<a

href

=

"./"

class

=

"btn btn-primary rounded-pill w-100"

>

Back to Home</

a

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

main>
<footer

class

=

"container-fluid py-3"

style

=

"background:#495C83; color:#fff"

>
<div

class

=

"container-fluid my-2"

>
<div

class

=

"text-center"

>
<b

>

JavaScript Reusable Loader ©

2023</

b

>
</

div

>
</

div

>
</

footer

>
</

body

>
<script

src

=

"./assets/script.js"

></

script

>
</

html

>

CSS

styles.css

/** Loader Styles */
#preloader

{
position

:

fixed

;
top

:

0

;
left

:

0

;
width

:

calc

(

100%

)

;
height

:

calc

(

100%

)

;
z-index

:

999

;
background

:

#0000008f

;
display

:

flex;
align-items

:

center

;
justify-content

:

center

;
}
#preloader

.lds-ring

{
display

:

inline-block

;
position

:

relative

;
width

:

80px

;
height

:

80px

;
}
#preloader

.lds-ring

div {
box-sizing

:

border-box

;
display

:

block

;
position

:

absolute

;
width

:

64px

;
height

:

64px

;
margin

:

8px

;
border

:

4px

solid

#fff

;
border-radius

:

50%

;
animation

:

lds-ring 1.2s

cubic-bezier

(

0.5

,

0

,

0.5

,

1

)

infinite

;
border-color

:

#00b6ff

transparent

transparent

transparent

;
}
#preloader

.lds-ring

div:

nth-child

(

1

)

{
animation-delay

:

-0.45s

;
}
#preloader

.lds-ring

div:

nth-child

(

2

)

{
animation-delay

:

-0.3s

;
}
#preloader

.lds-ring

div:

nth-child

(

3

)

{
animation-delay

:

-0.15s

;
}
@keyframes

lds-ring {
0%

{
transform

:

rotate

(

0deg

)

;
}
100%

{
transform

:

rotate

(

360deg

)

;
}
}

JavaScript

script.js

/**
* Loader Element Creation
*/
const

loader =

document.createElement

(

'div'

)
loader.setAttribute

(

"id"

,

"preloader"

)
loader.innerHTML

=

`<

div class

=

"lds-ring"

><

div></

div><

div></

div><

div></

div><

div></

div></

div>

`
/** Show Loader to document */
window.start_loader

=

function

(

)

{
if

(

document.querySelector

(

'#preloader'

)

!=

null

)
document.querySelector

(

'#preloader'

)

.remove

(

)
document.body

.appendChild

(

loader)
}
/** Remove Loader From Document */
window.end_loader

=

function

(

)

{
if

(

document.querySelector

(

'#preloader'

)

!=

null

)
document.querySelector

(

'#preloader'

)

.remove

(

)
}
/** Show Loader and remove it after 10 seconds on Show loader button is clicked */
const

show_loader_btn =

document.getElementById

(

'show_loader_btn'

)
if

(

show_loader_btn !==

null

)

{
show_loader_btn.addEventListener

(

'click'

,

function

(

e)

{
e.preventDefault

(

)
start_loader(

)

;
setTimeout(

(

)

=>

{
end_loader(

)

;
}

,

10000

)
}

)
}
/** Show Loader before unloading the document */
window.addEventListener

(

'beforeunload'

,

async function

(

event)

{
start_loader(

)
event.returnValue

=

"Are you sure to leave this page?"
}

)

Result Snapshot

The source code above will result in a web application that contains the following features:

Display Page Loader on Page Reload
Display Page Loader when navigating to another Page
Display Page Loader and remove it after 10 seconds

DEMO VIDEO

I have also provided the source code zip file that I created for this tutorial and is free to download. The download button is located below this article/content.

That's the end of this tutorial. I hope this Creating a Reusable Page Loader using JavaScript Tutorial will help you with what you are looking for and that you'll find this useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Creating a Reusable Page Loader using JavaScript Tutorial

More options

RaidenTheRipper2021

452,292

323,341

323,350