<div class="yukleniyor"></div>
.yukleniyor {
  width: 50px;
  height: 50px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#fff 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: yukle 0.8s ease-in-out infinite -0.2s;
}
@keyframes yukle {
  0%  {background-size: 15% 100%,15% 100%,15% 100%}
  33% {background-size: 15% 10% ,15% 100%,15% 100%}
  50% {background-size: 15% 100%,15% 10% ,15% 100%}
  66% {background-size: 15% 100%,15% 100%,15% 10% }
  100%{background-size: 15% 100%,15% 100%,15% 100%}
}












body {
  background-color: #70E887;
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.