To start answering this question, we first need to create a "Loader". Any animation that notifies the user or visitor 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 while it's loading.
As a result, adding a CSS loader to a web page will cause the user to be distracted or wait a while for the page to load properly. Rather than giving the impression that the site is unresponsive, a simple animation shows 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.
We will now use CSS to create the most common form of loader 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>
This is another form of 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>
Now that we know how to make a loader in CSS, we will move on to how to add a logo to the loader we just created.
Let's first try to understand why we might need to add a logo inside the loader. A logo is the mark and identity of a brand, which adds a personal touch to the user experience. Nowadays, all websites use personalization loaders that have a positive impact on their brand every time a user lands on their website.
The algorithm we will follow to create a loader with embedded logo is as follows -
Step 1 - To include our loader, we will build an HTML file and add an HTML div to the body of the file.
Step 2 - To provide our logo and loader animation, we will write a CSS file or embed it using style tags.
Step 3 - Insert the logo using the tag inside the div tag so that it now displays in the loader class
Given below are the properties we can use for the loader -
We will customize the border, color, height, and width according to the logo, which will greatly improve the overall consistency and increase the brand originality.
To add a gradual change animation, we will utilize the @keyframes rule in CSS.
Then, to make the loader rotate, we will use the CSS Transform property.
We will design the size of the logo image so that it is smaller than or equal to the size of the loader. We'll add an animation style in the opposite direction to counteract the effect of the logo's rotation.
Below is an example of adding a loader to a website using the algorithm above.
<!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://img.php.cn/upload/article/000/887/227/169555783454341.jpg" alt="How to set logo in loader using CSS?">
</div>
</body>
</html>
All in all, setting the logo in the loader using CSS is a simple task. All you need to do is set the width and height of your logo and then add it as the background image of your loader using the "background-image" attribute. You can also adjust its position using the "background-position" or "margin" properties and customize it further with other styling options like borders, box-shadow, etc. With some basic knowledge of CSS, you can easily create a beautiful loader with a logo. time!
The above is the detailed content of How to set logo in loader using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Why does localstorage expire so quickly?
What are the cloud operating systems?
The difference between console cable and network cable
How do I set up WeChat to require my consent when people add me to a group?
How to connect html files and css files
Computer freeze screen stuck
How to enable JavaScript
What are the basic data types in php
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
