How to create an animated loader ring using HTML and CSS?

Overview

The loader is a web component used by almost all web applications. To build a loader ring, we should have some prior knowledge of Cascading Style Sheets (CSS), as CSS is involved in the styling and animation part of the loader ring. Since the loader component is loaded before the original content is loaded into the web page. The main style properties used to build this feature are animations, transitions, and keyframes. These three CSS properties will turn a simple static animated loading loop into an animated loading loop.

algorithm

Step 1 - Create an HTML file in the folder and open it using a text editor. Add HTML boilerplate to HTML files.

Step 2 − Create an HTML parent div container in the body tag of the HTML document with a class name of "loading".

<div class="loading"></div>

Step 3 − Create a sub-div container, which is the main loader ring with a class name of "Loader".

<div class="loader"></div>

Step 4− Create a p tag containing the text "Loading".

<p>Loading ....</p>

Step 5 − Now create a style.css file and link the file to the HTML document.

<link rel="stylesheet" href="style.css">

Step 6 − Now style the HTML element and make the loader sound in the web page.

body {
   margin: 0;
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

p {
   font-family: 'Segoe UI';
}

Step 7 − Target the loader class and make a border using the border radius to make a ring frame-like structure.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
}

Step 8 − Add the animation attribute to the loader element. The animation name is "lring" and contains the animation duration and number of iterations.

.loader {
   border: 10px solid #d6d6d6;
   border-radius: 50%;
   border-top: 10px solid #5bdb34;
   width: 50px;
   height: 50px;
   animation: lring 1s linear infinite;
}

Step 9 − Now create keyframe properties and position the above animation and set the animation to the element.

@keyframes lring {
   0% {
      transform: rotate(0deg);
   }
   
   100% {
      transform: rotate(360deg);
   }
}

Step 10 − The animation loading ring has been successfully created.

Example

In this example, we create an animated loading loop functional component using simple HTML and CSS animation properties. To achieve this we created two files, the first file is index.html which is the layout or frame of the loader ring and the other file is the style.css file which is the style and work of the loader ring.

   
   <link rel="stylesheet" href="style.css">
   


   

      <div class="loader"></div>
      <p>Loading ....</p>
   

in conclusion

The above features are available for all web or mobile applications. Since what is created above is just a component, we can embed this functional component into a live working application by using API to get data or local data, so when the network data is not yet loaded to our web page, we can show the loading animation on the screen Loop Once the data is loaded, we replace the loading loop with the website content. We can also build animated loads of various designs.

The above is the detailed content of How to create an animated loader ring using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!