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.
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.
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.
Output: The following image shows the loading bar with animation.
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- Loading Text Animation Effect using CSS
- How to Create Skeleton Screen Loading Effect using CSS ?
- How to Create Border Animation using CSS ?
- How to create text-fill animation using CSS ?
- How to Create Jumping Text 3D Animation Effect using CSS ?
- How to Create Text Color Animation using HTML and CSS ?
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Text Changing Animation Effect using CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to show Page Loading div until the page has finished loading?
- What is Lazy Loading?
- Ways To Reduce The Loading Time Of Your Website | Set 2
- How to load jQuery code after loading the page?
- Ways To Reduce The Loading Time Of Website | Set 1
- CSS | animation-name Property
- CSS | Pulse animation
- CSS Floating Animation
- CSS | Tooltip Fade In Animation
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.