How to set the logo in CSS loader
How to Set an Identifier Within a CSS Loader
To solve this problem, we first need to create a ‘loader.’ Any animation that notifies users or visitors that a page is loading and will take a few seconds to complete is called a loader.
Most of the time, loaders come in handy when a website takes too long to retrieve results. If a particular website doesn’t have a CSS loader, users will think it’s not responding at all during the loading process.
Therefore, adding a CSS loader to a webpage can cause users to be distracted or have to wait a while for the page to load properly. Rather than giving the impression that the site is unresponsive, use a simple animation to indicate that the site is still retrieving results and that the page will be ready in a few seconds.
You can use CSS to add styles, animations, or any other form of styling to create a loader.
Example
We will now use CSS to create the most common loader styles found on the internet.
<!DOCTYPE html>
<html>
<head>
<title>Example of a loader using CSS</title>
<style>
h1 {
color: rgb(0, 128, 111);
}
.loader {
display: block;
position: absolute;
width: 15px;
height: 15px;
left: calc(50% - 1.25em);
border-radius: 1.25em;
transform-origin: 1.25em 2.25em;
animation: rotateAnimation;
animation-iteration-count: infinite;
animation-duration: 1.85s; }
@keyframes rotateAnimation {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.item1 {
animation-delay: 0.12s;
background-color: #1b7842;
}
.item2 {
animation-delay: 0.22s;
background-color: #239b53;
}
.item3 {
animation-delay: 0.32s;
background-color: #2ecc72;
}
.item4 {
animation-delay: 0.42s;
background-color: #82e0a0;
}
.item5 {
animation-delay: 0.52s;
background-color: #d5f5de;
}
</style>
</head>
<body>
<center>
<h1>Loader in CSS</h1>
<h4>Example of the most common form of loader in CSS</h4>
<div>
<div class="loader item1"></div>
<div class="loader item2"></div>
<div class="loader item3"></div>
<div class="loader item4"></div>
<div class="loader item5"></div>
</div> </center>
</body>
</html>
Example
Here’s another example of a loader that animates on the horizontal axis.
<!DOCTYPE html>
<html>
<head>
<title>Example of a loader using CSS</title>
<style>
h1 {
color: rgb(0, 128, 111);
}
.loader {
display: block;
position: absolute;
width: 150px;
height: 15px;
left: calc(58% - 5.25em);
transform-origin: 2px 20px;
animation: rotateAnimation;
animation-iteration-count: infinite;
animation-duration: 2.85s;
}
@keyframes rotateAnimation {
from {
transform: rotateY(55deg);
}
to {
transform: rotateY(360deg);
}
}
.item1 {
animation-delay: 0.12s;
background-color: #1b7842;
}
.item2 {
animation-delay: 0.22s;
background-color: #239b53;
}
.item3 {
animation-delay: 0.32s;
background-color: #2ecc72;
}
.item4 {
animation-delay: 0.42s;
background-color: #82e0a0;
}
.item5 {
animation-delay: 0.52s;
background-color: #d5f5de;
}
</style>
</head>
<body>
<center> <h1>Loader in CSS</h1>
<h4>Example of the most common form of loader in CSS</h4>
<div>
<div class="loader item1"></div>
<div class="loader item2"></div>
<div class="loader item3"></div>
<div class="loader item4"></div>
<div class="loader item5"></div>
</div>
</center>
</body>
</html>
Adding a Logo to a Loader
Now that we know how to make a loader in CSS, we’ll move on to how to add a logo to the loader we just created.
Let’s first try to understand why we might want to add a logo to a loader. A logo is a brand’s symbol and identity, and branding adds a personal touch to the user experience. Nowadays, all the websites use personalized loaders to create a positive impact for their brand every time a user lands on their website.
Algorithm
We will follow the following algorithm to create the loader for the embedded logo
- Step 1 – To include our loader, we will create an HTML file and add an HTML div to the body of the file.
-
Step 2 – To animate our logo and loader, we will write a CSS file or embed it using the style tag.
-
Step 3 – Insert the logo inside the div using the
<img>tag so that it will now appear within the loader class.
The properties we can use for our loader are as follows –
- We will customize the border, color, height, and width to match our logo, which will greatly improve overall consistency and add originality to our brand.
-
To add a gradual animation, we will utilize the @keyframes rule in CSS.
-
Next, to make the loader rotate, we’ll use the CSS transform property.
We’ll make the logo image smaller than or equal to the loader’s size. We’ll animate it in the opposite direction to offset the logo’s rotation.
Example
Below is an example of adding a loader to a website using the above algorithm.
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.loaderClass {
border: 12px solid #dcd7d7;
border-top: 12px solid #04802f;
border-radius: 50%;
width: 120px;
height: 120px;
animation: SpinLoader 2.5s linear infinite;
}
.loaderClass img {
height: 120px;
width: 120px;
border-radius: 50%;
animation: LogoModify 2.5s linear infinite;
}
@keyframes SpinLoader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes LogoModify {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="loaderClass">
<img src="https://www.tutorialspoint.com/static/https://coder-cafe.com/wp-content/uploads/2025/09/images/client/https://coder-cafe.com/wp-content/uploads/2025/09/science.svg" alt="logoImage">
</div>
</body>
</html>
Conclusion
Finally, setting a logo in a loader is a simple task using CSS. All you need to do is set the width and height of your logo and then use the “background-image” property to set it as the loader’s background image. You can also adjust its position by using the “background-position” or “margin” properties, and further customize it with other styling options like borders, box shadows, and more. With some basic CSS knowledge, you can easily create a beautiful loader with a logo in no time.