Yükleyici 5

.loader5 {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.out-1 {
position: absolute;
width: 4em;
height: 4em;
border-radius: 100%;
border: 0.2em solid transparent;
border-top-color: rgb(43, 226, 83);
animation: rec 2s infinite;
transition: all ease-in-out 0.3s;
}

.out-2 {
position: absolute;
width: 4em;
height: 4em;
border-radius: 100%;
border: 0.2em solid transparent;
border-left-color: rgb(226, 223, 43);
animation: rec 2s infinite;
transition: all ease-in-out 0.3s;
}

.out-3 {
position: absolute;
width: 4em;
height: 4em;
border-radius: 100%;
border: 0.2em solid transparent;
border-bottom-color: rgb(51, 105, 252);
animation: rec 2s infinite;
transition: all ease-in-out 0.3s;
}

.in5 {
position: absolute;
border-radius: 100%;
border: 0.2em solid rgba(43, 226, 83, 0.11);
width: 4em;
height: 4em;
transition: all ease-in-out 0.3s;
}

@keyframes rec {
0% {
transform: rotate(360deg);
}
}