Creating an Advanced Loading Screen with CSS
Creating an Advanced Loading Screen with CSS
When browsing different pages of a website, developers must add a loading screen to the website; this allows enough time for the website to navigate between pages. Loading screens are an effective way to allow users to wait while the website pages load/initialize.
How to Create a Loading Screen
To create a loading screen, we can use HTML and CSS. First, we’ll create a div element with a title tag and a percentage.
Then we’ll use CSS properties like border-radius to specify the height and width and animate the loading element. We’ll also use the overflow property to hide the element so that only the main content is visible.
Syntax
Below is the syntax for the overflow property:
p {
overflow: hidden/ visible/ scroll/ auto;
}
In the syntax above, you can see that the overflow property can be used with values like hidden to hide the element, visible to make it visible, and scroll to hide the element while adding a slider.
Let’s look at an example to better understand the loading screen.
Example
In the code below, we declare a title tag and a container div where we create our loading container, fill it with a color, and add an animation. We then add a second title to the container to display the percentage and a keyframe function to rotate it 360 degrees. Let’s take 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 output above that we first declare the title tag, then we add the container with the color inside it, display our secondary title, and then the animation inside the container. The animation rotates 360 degrees and is positioned above the percentage title.
Example
Here’s another example of creating an advanced loading screen. In this example, we declare a div element and assign it a class to style it using CSS properties. We add a black and red border and animate it, using keyframes to rotate the container 360 degrees. The code above demonstrates how to add a loading screen to a web page.
<!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 two colors rotating 360 degrees, giving users the impression that the page is loading. You can align the loader to the center of the page by using the align attribute.
Note – The keyframe property is a CSS property that enables developers to animate HTML elements without JavaScript. These keyframes specify the style that the element will have.
The keyframe property specifies how long the animation must run, and the transition used should be smooth and accurate. Percentages should be specified, and developers must ensure that the animation is compatible with all browsers.
Conclusion
Web developers use different types of styles and animations to create loading screens, depending on the project they are working on. Making the loading screen a little different and investing creative effort in this area is crucial, as users are often distracted by the appearance of the loading screen and the time it takes to load the page. The main purpose of these loading screens is to make the site interactive and not to annoy the user when the page takes a lot of time to load/start.