How to Create Animation Loading Bar using CSS ? Last Updated : 09 Jul, 2020 Comments Improve Suggest changes Like Article Like Report 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, so here we use the progress bar as an animation in loader. We will create a loading bar using HTML and CSS properties. HTML Code: In this section, we will design the basic structure of the HTML code. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Loader Bar</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <div class="loading_1"></div> <div class="loading_2">Loading GfG...</div> </div> </body> </html> CSS Code: In this section, we will use some CSS property to design the loading bar. We will use @keyframes which specifies animation code. The animation is created by gradually changing from one set of CSS styles to another. The changes in styles happen in percent using the keywords "from" (0%) and "to" (100%). We can change the set of CSS styles many times. CSS <style> body { background-color: #262626; font-family: Lato, sans-serif; } .loader { width: 150px; margin: 150px auto 70px; position: relative; } .loader .loading_1 { position: relative; width: 100%; height: 10px; border: 1px solid yellowgreen; border-radius: 10px; animation: turn 4s linear 1.75s infinite; } .loader .loading_1:before { content: ""; display: block; position: absolute; width: 0; height: 100%; background-color: yellowgreen; box-shadow: 10px 0px 15px 0px yellowgreen; animation: load 2s linear infinite; } .loader .loading_2 { position: absolute; width: 100%; top: 10px; color: green; font-size: 22px; text-align: center; animation: bounce 2s linear infinite; } @keyframes load { 0% { width: 0%; } 87.5% { width: 100%; } } @keyframes turn { 0% { transform: rotateY(0deg); } 6.25%, 50% { transform: rotateY(180deg); } 56.25%, 100% { transform: rotateY(360deg); } } @keyframes bounce { 0%, 100% { top: 10px; } 12.5% { top: 30px; } } </style> Complete Code: It is the combination of above two code section of HTML and CSS. In the following code, we have added the CSS code internally in the HTML code. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Loader Bar</title> <style> body { background-color: #262626; font-family: Lato, sans-serif; } .loader { width: 150px; margin: 150px auto 70px; position: relative; } .loader .loading_1 { position: relative; width: 100%; height: 10px; border: 1px solid yellowgreen; border-radius: 10px; animation: turn 4s linear 1.75s infinite; } .loader .loading_1:before { content: ""; display: block; position: absolute; width: 0; height: 100%; background-color: yellowgreen; box-shadow: 10px 0px 15px 0px yellowgreen; animation: load 2s linear infinite; } .loader .loading_2 { position: absolute; width: 100%; top: 10px; color: green; font-size: 22px; text-align: center; animation: bounce 2s linear infinite; } @keyframes load { 0% { width: 0%; } 87.5% { width: 100%; } } @keyframes turn { 0% { transform: rotateY(0deg); } 6.25%, 50% { transform: rotateY(180deg); } 56.25%, 100% { transform: rotateY(360deg); } } @keyframes bounce { 0%, 100% { top: 10px; } 12.5% { top: 30px; } } </style> </head> <body> <div class="loader"> <div class="loading_1"></div> <div class="loading_2">Loading GfG...</div> </div> </body> </html> Output: The following image shows the loading bar with animation. Comment More infoAdvertise with us Next Article How to Create Animation Loading Bar using CSS ? nehaahlawat Follow Improve Article Tags : Web Technologies CSS Write From Home 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 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 Border Animation using CSS? Creating a border animation using CSS involves utilizing hover effects to dynamically alter the appearance of an element's borders when interacted with. This technique leverages CSS pseudo-elements, combined with hover selectors, to achieve animated border transformations based on user interaction. 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 Incoming Call Animation Effect using CSS ? In this article, we will learn how to create an incoming call animation effect, by using CSS. Approach: To create this effect, we essentially need to animate the shadow effects around the element frame, which can be easily manipulated using the CSS box-shadow property. It is described by X and Y off 2 min read How to create a progress bar animation using HTML and CSS ? In this mini Web Development project we will utilize CSS animations and create a progress bar using them. The progress bar will start from zero and go to a certain extent as we want. The progress bar is basically showing the expertise of a programmer in different languages in animated form. Prerequi 3 min read How to create Gooey Balls animation using HTML & CSS ? The Gooey Balls loader is a basic CSS animation, where we will make a loader animation with two balls running in an animation effect that looks like the balls are rotating in motion. In this article, we will see how to create the rotating pass-through balls animation loader using HTML & CSS. App 2 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 Animated bars using HTML and CSS? Dancing bars are one of the classical components that are used in making a good looking website. They are very simple to implement and can be used as a loader or an animation while recording sound. Approach: The approach is to use unordered list to create bars and then animate them using keyframes. 2 min read How to Create Loading Blur Text Animation Effect using HTML and CSS? The blur text animation is known as the Smoky effect and is used to give the text a blurry animation. The text blurs linearly in one direction and then reappears. In this article, we will create a loading blur text animation effect using HTML and CSS.Approach: The approach to create loading blur tex 3 min read Like