In this tutorial, we will create an animated ring loader using HTML and CSS. A ring loader is a simple loading animation that displays a spinning ring to indicate that something is loading. This is a great addition to any website or web application to provide visual feedback to users while waiting for content to load.
Let’s get started:
Step 1: Setup HTML Structure
First, create a new HTML file and name it "index.html". Inside this file, add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Ring Loader</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="loader"></div>
</body>
</html>Step 2: Create CSS Styles
Next, create a new CSS file and name it "styles.css". Inside this file, add the following CSS code:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.loader {
width: 50px;
height: 50px;
border: 5px solid #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}Step 3: Explanation of the Code
In the HTML file, we have a simple structure with just one div element with a class of "loader". This div element will be used to display the ring loader.
In the CSS file, we define the styles for the loader element. We set the width and height to 50px, create a border of 5px solid #3498db to form the ring shape, and set the border-radius to 50% to make it a circle. We also set the border-top-color to transparent to create the empty space at the top of the ring.
We then use the @keyframes rule to create a spinning animation called "spin". The animation rotates the loader element from 0deg to 360deg over 1 second in a linear fashion, making it spin continuously.
Step 4: Testing
Save all your files and open the "index.html" file in a web browser. You should see a spinning ring loader in the center of the page. You can customize the loader by adjusting the size, color, and animation duration in the CSS code.
That’s it! You have successfully created an animated ring loader using HTML and CSS. You can now use this loader in your projects to provide a visually appealing loading animation for your users.
