How to create advanced Loading Screen using CSS ? Last Updated : 23 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.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: Comment More infoAdvertise with us Next Article How to create advanced Loading Screen using CSS ? V vishnuthulasidosss Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to Create Animated Loading Button using CSS? An animated loading button provides a visual cue during processing, often featuring a spinner or pulsing effect. To create one using CSS, style a button element, include a spinner inside, and use CSS animations (like keyframes) to animate the spinner on button activation.Table of ContentUsing Font A 3 min read How to Create Animation Loading Bar using CSS ? Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s 3 min read How to Create Animated Loader Ring using HTML and CSS? An Animated Loader Ring using HTML and CSS is a circular loading animation that visually indicates progress or loading status. It is created with a simple HTML structure and animated using CSS properties like border, transform, and @keyframes for rotation effects.ApproachHTML Structure: The code use 2 min read How to Create Skeleton Screen Loading Effect using CSS? The skeleton screens are used to indicate that the content is loading. They are also called splash screens. This is a part of the modern design trend. The skeleton screens are better than the loading spinners in some cases. It is used by many big companies like Facebook, Google, etc. HTML Code:In th 4 min read How to Create Animated Loading Button using Tailwind CSS? An Animated Loading Button is a button that displays a loading spinner or animation to indicate an ongoing process, such as form submission. Using Tailwind CSS, you can create this by combining utility classes for styling and animations to visually enhance the button during loading. Table of Content 2 min read Like