How to create advanced Loading Screen using CSS ? - GeeksforGeeks

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>
Output:
CSS loading screen
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to fetch data from localserver database and display on HTML table using PHP ?
How to Create Time-Table schedule using HTML ?
Search Bar using HTML, CSS and JavaScript
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Form validation using HTML and JavaScript
How to set input type date in dd-mm-yyyy format using HTML ?
How to set the default value for an HTML <select> element ?