Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating an Advanced Loading Screen in CSS
While browsing through different pages in a website, it is essential that the developer add a loading screen to the website; so that there is enough time for the website to traverse between webpages. A loading screen is an effective way, where the user can wait while the page of the website loads/initialize.
How to create the loading screen?
To create a loading screen, we can use HTML and CSS. Firstly, we will be creating a div element in which a heading tag is given, that shows the percentage.
Then we will be using CSS properties like the border-radius to assign height and width, and add animation to the loading element. We will also use the over-flow property to hide the element so that we can only see the main content.
Syntax
Below is the syntax for the overflow property −
p {
overflow: hidden/ visible/ scroll/ auto;
}
In the above syntax you can see that the values which are used with the overflow property can be the hidden values which hides the element, the visible which makes the element visible, and the scroll property which adds a slider while hiding the element.
Let’s look at an example to understand the loading screen better.
Example
In the code given below, we declared the heading tag and declared a div container, where we made our loading container and then filled it with a color and added an animation. After which, we added a second heading in the container to show the percentage and a keyframes function which rotates 360 degrees. Let’s have a look at the output of the code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Advanced Loading Screen</title>
<style>
body {
background-color: #111;
}
h2 {
color: white;
text-align: center;
margin: 20px 0;
font-size: 70px;
}
.screen {
height: 250px;
margin: auto;
border-radius: 50%;
position: relative;
width: 250px;
top: 20%;
border: 4px solid #DDD;
overflow: hidden;
}
@keyframes rotate {
to {
transform: rotate(358deg);
}
}
.screen::after {
content: "";
position: absolute;
top: 25%;
left: -50%;
height: 300%;
width: 200%;
nimation: rotate 10s linear forwards infinite;
background-color: blue;
border-radius: 50%;
box-shadow: 0 3 10px #4CAF50;
opacity: 0.9;
}
h3 {
color: white;
font-size: 70px;
text-align: center;
position: relative;
top: 14%;
}
</style>
</head>
<body>
<h2>Loading Screen</h2>
<div class="screen">
<h3>50%</h3>
</div>
</body>
</html>
You can see in the above output the heading tag that, we first declared and then the container in which we added color which shows our second heading and then the animation which is in the container. The animation rotates 360 degrees which is above the percentage heading.
Example
Following is an another example to create an advanced loading screen. In the following example, we declared a div element and then gave it a class to style the element using CSS properties. We added a color black and a color red to the borders and gave it an animation along and used the keyframes function to make the container rotate 360 degrees. The above code demonstrates how we can add a loading screen to our webpages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the advanced loading screen</title>
<style>
@keyframes spin {
100% {
transform: rotate(359deg);
}
0% {
transform: rotate(0deg);
}
}
.load {
border-bottom: 14px solid black;
border-right: 14px solid red;
border-left: 14px solid red;
border-top: 14px solid black;
border-radius: 49%;
width: 120px;
animation: spin 3s linear infinite;
height: 120px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="load"></div>
</body>
</html>
In the output you can see that the 2 colors rotate 360 degrees and gives the user an impression that the page is being loaded. You can align the loader to the center of the page by using the align property.
Note − The keyframe property is a property of the CSS and it enables the developer to animate HTML elements that too without using JavaScript and these keyframes specify the styles which the element is going to have.
The keyframe property specifies the amount of time the animation has to run, the transitions used should be smooth and accurate. Percentages should be specified and the developer has to ensure that the animation is compatible to all the browsers.
Conclusion
Web developers use different types of styles and animations to create loading screens depending on the project they are working on. Making loading screens a bit different and putting creative effort in doing so is essential, as users usually get distracted by the appearance of loading screen and by the time taken to load the page. The main objective of these loading screens is to make the website interactive and not to bore the user while the pages take a lot of time to load/initiate.
723 Views
