How to create advanced Loading Screen using CSS ?

Last Updated : 23 Nov, 2021

In this article, we are going to build an advanced version of a wave-like structure for loading screens using HTML and CSS. The loading screen is useful when a certain page took a few seconds to load the content of the webpage. If a certain webpage doesn’t contain the loading screen then at the time of loading the web page, the user might think that the webpage is not responding at all. So, this way can be effective to make the user distracted or wait for a few seconds until the page is fully loaded. In this way, the users can be able to engage with the webpage for a bit longer duration.

CSS loading screen

Approach:

Declare the div element that has the load class. Inside the div element, declare the h2 tag to show the loading percentage.
In the CSS part, add the border-radius property in the load class, also make the position relative.
Set the height and width property equal and give a border-radius to set rounded corners. Then, assign a rotate animation to it using the @keyframe property to create the animation/transition effects to the browser.
Set the overflow property of the div element to hidden, so that only the part inside div is visible, to simulate a loading screen.

Example: This example describes the CSS loading screen with a wave-like structure.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Advanced Loading Screen</title> 
    <style> 
    body { 
        background-color: black; 
    } 
      
    h1 { 
        color: #4CAF50; 
        text-align: center; 
        font-size: 70px; 
        margin: 20px 0; 
    } 
      
    .load { 
        height: 250px; 
        width: 250px; 
        margin: auto; 
        border-radius: 50%; 
        position: relative; 
        top: 20%; 
        overflow: hidden; 
        border: 4px solid #DDD; 
    } 
      
    .load::after { 
        content: ""; 
        position: absolute; 
        top: 25%; 
        left: -50%; 
        height: 200%; 
        width: 200%; 
        background-color: #388E3C; 
        box-shadow: 0 0 15px #4CAF50; 
        border-radius: 40%; 
        animation: rotate 10s linear forwards infinite; 
        opacity: 0.9; 
    } 
      
    h2 { 
        color: white; 
        font-size: 70px; 
        text-align: center; 
        font-family: "Trebuchet MS"; 
        position: relative; 
        top: 10%; 
    } 
      
    @keyframes rotate { 
        to { 
            transform: rotate(360deg); 
        } 
    } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div class="load"> 
        <h2>75%</h2> 
    </div> 
</body> 
  
</html>