Hello everyone! In this article, we'll be exploring how to create Responsive loading page using HTML, CSS and JavaScript. A loading page is an essential component of a website as it keeps the user engaged and informed during the loading process. HTML, CSS, and JavaScript can be used together to create a visually compelling loading page that provides feedback to the user.
In HTML, the loading page can be structured to include all the necessary content such as the website logo, progress bars, and animations. CSS can then be used to style the elements on the page, including colors, fonts, borders, and animation effects.
JavaScript can be used to add interactivity to the loading page. For instance, a percentage loader can be used to display the progress of the loading process in real-time. Additionally, JavaScript can be used to trigger animations and other effects on the page.
You may Like
Responsive loading page using HTML, CSS and JavaScript
To create this Responsive loading page using HTML, CSS and JavaScript. First, you need to create three files, one HTML, CSS and another one is a JS File. After creating these files just paste the following codes in your file.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.
<!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>3D Responsive Landing Page - HTML CSS & JAVASCRIPT</title>
<!-- STYLE.CSS -->
<link rel="stylesheet" href="./assets/CSS/style.css" />
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<header class="header container">
<nav class="navbar">
<div class="logo">
<a href="#">
<img src="./icons/graduation-hat.png" alt="graduation-hat" class="logo_img" />
<span>Codewithzan</span>
</a>
</div>
<div class="nav_menu">
<ul class="nav_menu_list">
<li class="nav_menu_list_item">
<a href="#" class="nav_link">home</a>
</li>
<li class="nav_menu_list_item">
<a href="#" class="nav_link">about</a>
</li>
<li class="nav_menu_list_item">
<a href="#" class="nav_link">courses</a>
</li>
<li class="nav_menu_list_item">
<a href="#" class="nav_link">instructor</a>
</li>
<li class="nav_menu_list_item">
<a href="#" class="nav_link">contact</a>
</li>
<li class="nav_menu_list_item">
<button class="nav__cta__btn">login/register</button>
</li>
</ul>
</div>
<button class="nav_toggle_btn" id="nav_toggle">
<i class="bx bx-menu bx-sm"></i>
</button>
</nav>
</header>
<main class="container home_wrapper">
<section class="home">
<div class="absolute_img">
<img src="./icons/bulb.png" alt="bulb" class="bulb_img" />
</div>
<div class="home__offer">
<div class="pill">
<span>45% OFF</span>
</div>
<span class="home__offer_title">LEARN FROM TODAY</span>
</div>
<div class="home__data">
<h2 class="home__title">The Best Way For Your Learning</h2>
<p class="home__desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia consequatur, possimus perspiciatis quaerat
ipsa vel? Quis totam voluptate sed quam rem enim ut ipsam. Modi molestias consectetur maxime dolorem
laboriosam.
</p>
<div class="home__cta">
<button class="explore__btn">Explore Courses</button>
<a href="#" class="watch_demo_btn">Watch Demo</a>
</div>
</div>
<img src="./icons/Saturn.png" alt="Saturn_img" class="saturn_img" />
</section>
<section class="home__img_wrapper">
<div class="bg_fade_1"></div>
<div class="bg_fade_2"></div>
<img src="./images/hero.png" alt="hero-img" class="hero_img" />
<img src="./icons/Saturn.png" alt="saturn_img" class="saturn_img_2" />
</section>
</main>
<br /><br />
<section class="footer container">
<ul class="footer-card-list">
<li class="footer-card-list-item student_card">
<div class="student_card_img">
<img src="./images/machine learning.jpg" alt="student-1" />
</div>
<span class="student_course">Machine Learning A-Z™: AI, Python & R + ChatGPT Bonus [2023]</span>
<div class="course">
<div class="course_stats">
<span>
<i class="bx bxs-graduation"></i>
198 Students
</span>
</div>
<ul class="course_stars">
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
</ul>
</div>
</li>
<li class="footer-card-list-item student_card">
<div class="student_card_img">
<img src="./images/react.jpg" alt="student-2" />
</div>
<span class="student_course">React - The Complete Guide 2023 (incl. React Router & Redux)</span>
<div class="course">
<div class="course_stats">
<span>
<i class="bx bxs-graduation"></i>
214 Students
</span>
</div>
<ul class="course_stars">
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
</ul>
</div>
</li>
<li class="footer-card-list-item student_card">
<div class="student_card_img">
<img src="./images/app develoing.jpg" alt="student-3" />
</div>
<span class="student_course">Flutter & Dart - The Complete Guide [2023 Edition]</span>
<div class="course">
<div class="course_stats">
<span>
<i class="bx bxs-graduation"></i>
99 Students
</span>
</div>
<ul class="course_stars">
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
<li><i class="bx bxs-star star_icon"></i></li>
</ul>
</div>
</li>
</ul>
</section>
</body>
<!-- js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="./assets/JS/script.js"></script>
</html>
Now that we have created the basic HTML markup, we can style the page using CSS. After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400&family=Mulish:wght@600;700;800&family=Quicksand:wght@500&display=swap");
@media screen and (min-width: 768px) {
:root {
--normal-font-size: 1.5em;
--lg-font-size: 3.5em;
--medium-font-size: 1.1em;
--sm-font-size: 0.88;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body {
background-color: #ebecfe;
overflow-x: hidden;
}
ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
}
button:focus {
outline: none;
}
h1,
h2,
h3 {
margin: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.header {
height: 5.5em;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.navbar {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: block;
}
.logo a {
display: flex;
align-items: center;
}
.logo_img {
transform: translateY(0.5em);
width: 60px;
object-fit: cover;
}
.logo span {
font-size: 1.1em;
font-weight: 600;
color: #000;
}
.nav_menu_list {
display: flex;
align-items: center;
flex-direction: row;
column-gap: 1.75em;
}
.nav_menu_list_item {
display: inline-flex;
}
.nav_link {
color: #000;
font-size: 1em;
text-transform: capitalize;
letter-spacing: 0.5px;
font-weight: 500;
position: relative;
padding-bottom: 0.25em;
}
.nav_link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 0;
background-color: #0f7d65;
transition: width 0.5s ease;
}
.nav_link:hover,
.nav_link:hover::after {
width: 100%;
color: #0f7d65;
}
.nav__cta__btn {
background-color: #f7a44b;
padding: 0.7em 1em;
border-radius: 2em;
font-size: 1em;
text-transform: capitalize;
color: #fff;
}
.nav__cta__btn:hover {
background-color: #de9444;
}
@media screen and (max-width: 991px) {
.nav_menu {
position: fixed;
top: 5.5em;
right: -100%;
height: 100vh;
width: 70%;
background-color: #f5f5f4;
z-index: 100;
box-shadow: 0 20px 10px rgba(38, 33, 61, 0.2);
text-align: center;
padding: 3em 0;
display: flex;
flex-direction: column;
margin: 0 auto;
opacity: 0;
transition: all 0.5s ease;
}
.nav_menu_list {
margin-top: 2em;
display: flex;
flex-direction: column;
row-gap: 1.7em;
}
}
.show {
right: 0;
opacity: 1;
}
.home_wrapper {
height: calc(5.5em + 100vh);
display: grid;
grid-template-columns: 100%;
row-gap: 3em;
margin-top: 3em;
}
.home {
position: relative;
text-align: center;
}
.absolute_img {
position: absolute;
top: -5%;
left: 0;
transform: translateX(-1em) rotate(-20deg);
}
.absolute_img .bulb_img {
width: 50px;
height: 50px;
object-fit: cover;
}
.home__offer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 1.35em;
}
.pill {
background-color: #be1f0d;
border-radius: 5em;
padding: 0.5em 0.7em;
color: #fff;
display: inline-flex;
font-size: 0.77;
font-weight: 500;
}
.home__offer_title {
color: #be1f0d;
letter-spacing: 2px;
font-size: 0.77;
font-weight: 600;
}
.home__data {
display: flex;
flex-direction: column;
row-gap: 1.9em;
margin-top: 1.35em;
}
.home__title {
color: #060a12;
font-size: 2.2em;
font-weight: 800;
font-family: "Mulish", sans-serif;
}
.home__desc {
font-family: "Quicksand", sans-serif;
font-weight: 500;
color: gray;
font-size: 1em;
}
.home__cta {
display: flex;
align-items: center;
justify-content: center;
column-gap: 1.5em;
}
.explore__btn {
background-color: #0f7d65;
padding: 1em 1.5em;
color: #fff;
font-weight: 500;
border-radius: 2em;
font-size: 0.77;
}
.explore__btn:hover {
background-color: #449c89;
}
.watch_demo_btn {
color: #000;
font-weight: 500;
display: inline-block;
position: relative;
padding-bottom: 0.25em;
border-bottom: 2px solid #000;
}
.saturn_img {
position: absolute;
left: 0;
width: 80px;
height: 80px;
object-fit: contain;
}
.home__img_wrapper {
position: relative;
display: grid;
justify-content: center;
align-content: center;
}
.bg_fade_1 {
background-color: #cff4ed;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 0;
filter: blur(20px);
z-index: -1;
}
.bg_fade_2 {
background-color: #fde2c4;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
right: 0;
filter: blur(20px);
z-index: -1;
}
.hero_img {
transform: translateX(2.5em);
width: 400px;
height: 400px;
object-fit: contain;
}
.saturn_img_2 {
width: 60px;
height: 60px;
object-fit: contain;
position: absolute;
right: 0;
}
.footer {
height: 12.5em;
background-color: #0b7159;
border-radius: 2.5em 2.5em 0 0;
}
.footer-card-list {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
height: 0;
column-gap: 2em;
}
.student_card {
width: 15em;
background-color: #f8f1ff;
border-radius: 1em;
box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2);
transform: translateY(-7em);
padding: 1em;
}
.student_card_img {
margin-bottom: 0.25em;
}
.student_card_img img {
border-radius: 0.5em;
}
.student_course {
font-size: 0.77;
font-weight: 600;
font-family: "Quicksand", sans-serif;
}
.course {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.88em;
}
.course_stats>span {
font-size: 0.77;
color: #525966;
}
.course_stars {
display: flex;
column-gap: 0.1em;
}
.star_icon {
font-size: 0.77;
color: #e4a951;
}
@media screen and (min-width: 991px) {
.nav_toggle_btn {
display: none;
}
.home_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 2em;
padding: 0 3em;
}
.home {
position: relative;
text-align: start;
padding-top: 3em;
}
.absolute_img {
position: absolute;
top: 0;
left: 0;
transform: translateX(-6em) rotate(-20deg);
}
.absolute_img .bulb_img {
width: 50px;
height: 50px;
object-fit: cover;
}
.home__offer {
justify-content: start;
}
.home__desc {
width: 80%;
}
.home__cta {
justify-content: start;
column-gap: 2.5em;
}
.saturn_img {
left: -15%;
bottom: 25%;
width: 80px;
height: 80px;
}
.home__img_wrapper {
position: relative;
display: grid;
justify-content: right;
}
.bg_fade_1 {
top: 20%;
}
.bg_fade_2 {
right: 7em;
}
.hero_img {
transform: translateY(-6em) translateX(4em);
width: 555px;
height: 555px;
object-fit: contain;
}
.saturn_img_2 {
right: -15%;
}
}
@media screen and (max-width: 991px) {
.footer {
margin-top: calc(5.5em + 20vh);
height: 100%;
}
.footer-card-list {
width: 100%;
display: flex;
flex-direction: row;
height: 100%;
row-gap: 3em;
}
}
@media screen and (max-width: 1200px) {
.container {
margin-right: 1em;
margin-left: 1em;
}
}
Lastly at the last Create Js file with the name of script.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
const menu = document.querySelector(".nav_menu");
const toggle_menu = document.querySelector("#nav_toggle");
toggle_menu.addEventListener("click", () => {
menu.classList.toggle("show");
});
gsap.from(".logo, .nav_toggle_btn", {
opacity: 0,
duration: 1,
delay: 2.1,
y: 10,
});
gsap.from(".nav_menu_list_item", {
opacity: 0,
duration: 0.75,
delay: 2.1,
y: 5,
stagger: 0.2,
});
gsap.from(".home__offer", {
opacity: 0,
duration: 1,
delay: 1.6,
y: 30,
});
gsap.from(".home__title", {
opacity: 0,
duration: 1,
delay: 1.8,
y: 30,
});
gsap.from(".home__desc", {
opacity: 0,
duration: 1,
delay: 2,
y: 30,
});
gsap.from(".home__cta", {
opacity: 0,
duration: 1,
delay: 2.3,
y: 20,
});
Finally, you have successfully developed a Responsive loading page using HTML, CSS, and JavaScript! In case you encounter any issues or errors with your code, you can easily obtain the source code files by clicking on the download button provided, completely free of charge. The downloaded zip file includes the project folder with all the necessary source code files.