Yükleyici 3

.loader3 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}

.bar3 {
width: 10px;
height: 70px;
background: hsl(0, 100%, 50%);
display: inline-block;
transform-origin: bottom center;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
animation: loader8913 1.2s linear infinite;
}

.bar31 {
animation-delay: 0.1s;
}

.bar32 {
animation-delay: 0.2s;
}

.bar33 {
animation-delay: 0.3s;
}

.bar34 {
animation-delay: 0.4s;
}

.bar35 {
animation-delay: 0.5s;
}

.bar36 {
animation-delay: 0.6s;
}

.bar37 {
animation-delay: 0.7s;
}

.bar38 {
animation-delay: 0.8s;
}

@keyframes loader8913 {
0% {
transform: scaleY(0.1);
}

50% {
transform: scaleY(1);
background: yellowgreen;
}

100% {
transform: scaleY(0.1);
background: transparent;
}
}