Introduction:
In this tutorial, we'll explore how to create a stylish loader with a name using HTML and CSS. This loader consists of a rotating outer circle, an inner circle, and a changing letter representing the name. By the end of this tutorial, you'll have a beautiful loader that you can use in your web projects.
Prerequisites:
Before we get started, make sure you have a basic understanding of HTML and CSS. Also, ensure that you have a text editor and a web browser installed on your computer.
Step 1: Setting up the HTML Structure:
Begin by creating a new HTML file and adding the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader..</title>
<!------- linking CSS file to the HTML file --------->
<link href="loader.css" type="stylesheet">
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="inner-circle"></div>
<div class="letter" id="letter"></div>
</div>
</body>
</html>
In this code, we have a container div that holds the loader elements: the outer circle, the inner circle, and the letter.
Step 2: Styling the Loader with CSS:
Next, let's style the loader using CSS. Add the following code to the <style> section of your HTML file or create a separate CSS file and link it to your HTML as shown in line 6 of HTML code:
@import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap');
* {
box-sizing: border-box;
}
body {
background: #000000;
}
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle {
position: relative;
height: 100px;
width: 100px;
border-radius: 50%;
border: solid 4px #fff;
padding: 15px;
}
.inner-circle {
position: absolute;
height: 80px;
width: 80px;
border: solid 2px #000;
border-radius: 50%;
border-right-color: #fff;
animation: rotate 2s infinite linear;
}
.letter {
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
background: #000;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight:;
color: #fff;
font-family: 'Train One', cursive;
}
.letter::before {
content: "";
animation: name 8s infinite linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes name {
0%, 100% {
opacity: 1;
content: "A";
}
12.5% {
opacity: 0;
}
25% {
opacity: 1;
content: "J";
}
37.5% {
opacity: 0;
}
50% {
content: "A";
opacity: 1;
}
62.5% {
opacity: 0;
}
75% {
content: "Y";
opacity: 1;
}
87.5% {
opacity: 0;
}
}
In this CSS code, we define the styles for the container, circles, letter, and animation keyframes. We also import the "Train One" font from Google Fonts for the letter.
Step 3: Understanding the CSS Code:
Let's go through the key parts of the CSS code:
The container class sets up the main container that holds the loader. It uses flexbox to center the elements both vertically and horizontally.
The circle class creates the outer circle of the loader. It has a solid white border and is positioned relative to the container.
The inner-circle class creates the rotating inner circle. It has a smaller size and is positioned absolutely within the outer circle. The rotate animation is applied to make it rotate continuously.
The letter class represents the changing letter in the loader. It is a circular element positioned absolutely within the outer circle. The name animation is used to change the letter based on keyframes defined.
The name animation is responsible for changing the letter at specific intervals. In this example, it transitions between the letters "A," "J," and "Y" at different keyframe percentages.
Step 4: Testing the Loader:
Save your HTML file and open it in a web browser. You should see the loader with the rotating circles and changing letter representing the name "AJAY." Feel free to modify the animation keyframes and adjust the name to your preference.
Conclusion:
In this tutorial, we learned how to create a fancy loader with a name using HTML and CSS. This loader can be used to enhance the user experience while waiting for content to load. Experiment with different animation effects, colors, and fonts to customize the loader to match your project's style. You can also explore integrating this loader into your web applications using JavaScript for dynamic loading scenarios.
I hope you found this tutorial helpful! Start using this fancy loader in your web projects and make a lasting impression on your users. Happy coding!
Top comments (0)