How to Create Animated Loader Ring using HTML and CSS? Last Updated : 10 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 uses a <div> with the class .circle to create the loader ring.Body Styling: Sets the background color to green and removes default margins and padding for full coverage.Loader Design: The .circle class styles the ring with size, position, border, and circular shape.Animation Setup: Uses @keyframes to animate the loader, rotating it from 0 to 360 degrees.Infinite Spin: The animation runs infinitely with a 1-second duration and linear timing for smooth rotation.Example: Here we create an animated loader ring using a <div> styled as a circle. It continuously spins with a 1-second infinite rotation animation, simulating a loading effect on a green background. HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> How to Create Animated Loader Ring using HTML and CSS? </title> <style> body { margin: 0; padding: 0; background: #008000; } .circle { position: absolute; top: 40%; left: 50%; transform: translate(-40%, -50%); animation: effect 1s linear infinite; width: 100px; height: 100px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; } @keyframes effect { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="circle"></div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create Animated Loader Ring using HTML and CSS? L lakshgoel204 Follow Improve Article Tags : Web Technologies HTML CSS Web Templates Similar Reads 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 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 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 Create Scanning Animation Loader using HTML & CSS In this article, we will learn how to create a Scanning Animation. This can be used to add interactivity to the loader page. This is approached by simple HTML & CSS. Glimpse of the Project: Approach: We will first create an HTML file in which we are going to add a div for adding a span in it.We 2 min read Like