How to make CSS Loader ? Last Updated : 23 Oct, 2019 Comments Improve Suggest changes Like Article Like Report The CSS loader is useful when a certain page took a few seconds to load the content of the webpage. When the user has to wait for the content to fully loaded on the webpage. If the certain webpage doesn't have the loader of CSS then the loading time the user will think that the webpage is not responding at all. So putting the CSS loader on the web page makes the user distracted or waited for few seconds until the page is fully loaded. The CSS can be used for styling and adding animations and other visual motion graphics on a webpage. A small demo for animations under CSS is explained in the following code. Example 1: This example creates the CSS loader using CSS. html <!DOCTYPE html> <html> <head> <title>css loader</title> <style> h1{ color:green; } .gfg { display: block; position: absolute; width: 10px; height: 10px; left: calc(50% - 1em); border-radius: 1em; transform-origin: 1em 2em; animation: rotate; animation-iteration-count: infinite; animation-duration: 1.8s; } /* Rotation of loader dots */ @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } .g1 { animation-delay: 0.1s; background-color: #1D8348; } .g2 { animation-delay: 0.2s; background-color: #239B56; } .g3 { animation-delay: 0.3s; background-color: #2ECC71; } .g4 { animation-delay: 0.4s; background-color: #82E0AA ; } .g5 { animation-delay: 0.5s; background-color: #D5F5E3; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h4>CSS Loader</h4> <div class='loader'> <div class='gfg g1'></div> <div class='gfg g2'></div> <div class='gfg g3'></div> <div class='gfg g4'></div> <div class='gfg g5'></div> </div> </center> </body> </html> Output: Example 2: This example creates the CSS loader using CSS. html <!DOCTYPE html> <html> <head> <title>css loader</title> <style> h1{ color:green; } .gfg { display: block; position: absolute; width: 100px; height: 10px; left: calc(58% - 5em); transform-origin: 1px 10px; animation: rotate; animation-iteration-count: infinite; animation-duration: 2.8s; } /* Rotation of loader dots */ @keyframes rotate { from { transform: rotateY(50deg); } to { transform: rotateY(360deg); } } .g1 { animation-delay: 0.1s; background-color: #1D8348; } .g2 { animation-delay: 0.2s; background-color: #239B56; } .g3 { animation-delay: 0.3s; background-color: #2ECC71; } .g4 { animation-delay: 0.4s; background-color: #82E0AA ; } .g5 { animation-delay: 0.5s; background-color: #D5F5E3; } </style> </head> <body> <center> <h1>GeeksforGeeks</h1> <h4>CSS Loader</h4> <div class='loader'> <div class='gfg g1'></div> <div class='gfg g2'></div> <div class='gfg g3'></div> <div class='gfg g4'></div> <div class='gfg g5'></div> </div> </center> </body> </html> Output: Comment More infoAdvertise with us Next Article How to make CSS Loader ? Y yasdatta Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Primer CSS Loaders Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read How to set logo inside loader using CSS ? In this article, we will learn how to set logo inside the loader using CSS.A loader is any animation that alerts the visitor/user about the current page that is loading at the moment, and you will have to wait for a few seconds for it to load completely. Loaders are generally helpful when any websit 4 min read How to Link a CSS to HTML? To link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file.Syntax:<link rel="stylesheet" href="styles.css">rel="stylesheet": It specifies 3 min read How to load css resources conditionally ? In the world of web development, CSS plays a crucial role in styling HTML code. Typically, the CSS code is linked in the head tag of an HTML document, allowing developers to easily apply styles to the content of a web page. However, there may be times when the desired styling is dependent on specifi 6 min read How to Install and use Materialize CSS ? Materialize CSS is a design language that was made with CSS, JavaScript, and HTML. It is made and planned by Google. Materialize is created and designed by Google. Googleâs goal is to develop a system design that allows a better user experience across all products on any platform. It also makes the 2 min read Like