CSS pulse loader is a feature in web development that helps to reduce the time it takes to load a website's styling and formatting. It is often used in conjunction with HTML and JavaScript to speed up the loading time of websites. CSS Loader can be used to improve website performance and user experience by ensuring that all styling and formatting is loaded before the user interacts with the website.
<div class="loaders-container-04">
<div>
<span class="pulse-loader-1"> </span>
</div>
<div>
<span class="pulse-loader-2"> </span>
</div>
<div>
<span class="pulse-loader-3"> </span>
</div>
<div>
<span class="pulse-loader-4"> </span>
</div>
</div>.pulse-loader-1 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.pulse-loader-1::after,
.pulse-loader-1::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader27 2s ease-in-out infinite;
animation: animloader27 2s ease-in-out infinite;
}
.pulse-loader-1::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.pulse-loader-2 {
width: 48px;
height: 48px;
background: #fff;
display: inline-block;
border-radius: 50%;
-webkit-animation: animloader14 1s ease-in infinite;
animation: animloader14 1s ease-in infinite;
}
.pulse-loader-3 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.pulse-loader-3::after,
.pulse-loader-3::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
}
.pulse-loader-3::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.pulse-loader-4 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
}
.pulse-loader-4::after,
.pulse-loader-4::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
}
.pulse-loader-4::after {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes animloader27 {
0%,
100% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
@keyframes animloader27 {
0%,
100% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes animloader14 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes animloader14 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}.pulse-loader-1 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
&::after {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader27 2s ease-in-out infinite;
animation: animloader27 2s ease-in-out infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
&::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader27 2s ease-in-out infinite;
animation: animloader27 2s ease-in-out infinite;
}
}
.pulse-loader-2 {
width: 48px;
height: 48px;
background: #fff;
display: inline-block;
border-radius: 50%;
-webkit-animation: animloader14 1s ease-in infinite;
animation: animloader14 1s ease-in infinite;
}
.pulse-loader-3 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
&::after {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
&::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
}
}
.pulse-loader-4 {
width: 48px;
height: 48px;
display: inline-block;
position: relative;
&::after {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
&::before {
content: "";
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
left: 0;
top: 0;
-webkit-animation: animloader14 2s linear infinite;
animation: animloader14 2s linear infinite;
}
}
@-webkit-keyframes animloader27 {
0%,
100% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
@keyframes animloader27 {
0%,
100% {
transform: scale(0);
opacity: 1;
}
50% {
transform: scale(1);
opacity: 0;
}
}
@-webkit-keyframes animloader14 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}
@keyframes animloader14 {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
}
}