How to create advanced Loading Screen using CSS ? Last Updated : 23 Jul, 2024 Comments Improve Suggest changes 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 How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader, 6 min read How to Create Wave Loader using CSS? Creating a Wave Loader using CSS involves designing an animation that mimics wave-like motion, typically used to indicate loading progress. It is achieved through CSS animations, keyframes, and transformations to animate multiple elements sequentially, creating a flowing, wave-like effect.ApproachHT 2 min read How to Create a Dot loading Animation using HTML and CSS? The Dot Loading animation can be used to enhance the user interface of a website, it can be added while the website loads. This animation can be easily created using HTML and CSS. HTML Code: In this section we will create the basic structure of the dot loader using a div tag which will have some spa 2 min read How to create Image Stack Illusion using HTML and CSS ? In this article, we are going to create an illusion of images below the main image. It is the same as the image set of the gallery in an older version of Android. This is a simple project, we can achieve our target only by using HTML AND CSS.Overview of the project:Approach:Create a main div in whic 3 min read How to create windows loading effect using HTML and CSS ? In this article, we are going to create a window loading effect before the lock screen appears using HTML and CSS. Glimpse of the Windows Loading Effect: Approach: Create an HTML file that contains HTML div in which we are giving the loader effect.Then we create 5 span elements which are used for c 4 min read Like