Yükleyici 21

.container21 {
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
position: absolute;
}

.container21 div {
width: 100px;
height: 100px;
top: 50px;
left: 50px;
display: block;
position: absolute;
}

.top-left {
animation: tl 7.5s ease infinite
}

.top-right {
animation: tr 7.5s ease infinite
}

.bottom-left {
animation: bl 7.5s ease infinite
}

.bottom-right {
animation: br 7.5s ease infinite
}

.container21 div:before,
.container21 div:after {
display: block;
position: absolute;
content: ""
}

.container21 div:before {
width: 50px;
height: 50px
}

.top-left:before {
background: rgb(251, 189, 4);
top: 0;
left: 0;
border-radius: 100% 0 0 0
}

.top-right:before {
background: rgb(234, 67, 52);
top: 0;
right: 0;
border-radius: 0 100% 0 0
}

.bottom-left:before {
background: rgb(52, 168, 83);
bottom: 0;
left: 0;
border-radius: 0 0 0 100%
}

.bottom-right:before {
background: rgb(67, 135, 244);
bottom: 0;
right: 0;
border-radius: 0 0 100% 0
}

.container21 div:after {
width: 25px;
height: 25px;
z-index: 1
}

.top-left:after {
top: 25px;
left: 25px;
border-radius: 100% 0 0 0
}

.top-right:after {
top: 25px;
right: 25px;
border-radius: 0 100% 0 0
}

.bottom-left:after {
bottom: 25px;
left: 25px;
border-radius: 0 0 0 100%
}

.bottom-right:after {
bottom: 25px;
right: 25px;
border-radius: 0 0 100% 0
}

@keyframes tl {
0%,96%,100% {
transform: rotate(0deg)
}

12% {
transform: rotate(-45deg)
}

24% {
transform: rotate(-90deg)
}

36% {
transform: rotate(-135deg)
}

48% {
left: 50px;
transform: rotate(-180deg)
}

60% {
left: 125px;
opacity: 1;
transform: rotate(-135deg)
}

61%,95% {
opacity: 0
}
}

@keyframes tr {
0% {
transform: rotate(0deg)
}

12% {
transform: rotate(-45deg)
}

24% {
transform: rotate(-90deg)
}

36% {
transform: rotate(-135deg)
}

48% {
transform: rotate(-180deg)
}

60% {
transform: rotate(-225deg)
}

72% {
transform: rotate(-270deg)
}

84% {
transform: rotate(-315deg)
}

96%,100% {
transform: rotate(-360deg)
}
}

@keyframes bl {
0%,100% {
transform: rotate(0deg)
}

12% {
transform: rotate(-45deg)
}

24% {
left: 50px;
transform: rotate(-90deg)
}

36% {
left: 125px;
opacity: 1;
transform: rotate(-45deg)
}

37%,83% {
opacity: 0
}

84% {
left: -25px;
opacity: 1;
transform: rotate(-45deg)
}

96% {
left: 50px;
transform: rotate(0deg)
}
}

@keyframes br {
0%,96%,100% {
transform: rotate(0deg)
}

12% {
left: 125px;
opacity: 1;
transform: rotate(45deg)
}

13%,59% {
opacity: 0
}

60% {
left: -25px;
opacity: 1;
transform: rotate(45deg)
}

72% {
left: 50px;
transform: rotate(90deg)
}

84% {
transform: rotate(45deg)
}
}