<div class="yukleniyor"></div>
.yukleniyor {
  height: 4px;
  width: 130px;
  background: no-repeat linear-gradient(#6100ee 0 0),no-repeat linear-gradient(#6100ee 0 0),#d7b8fc;
  background-size: 60% 100%;
  animation: yukle 3s infinite;
}
@keyframes yukle {
  0%   {background-position:-150% 0,-150% 0}
  66%  {background-position: 250% 0,-150% 0}
  100% {background-position: 250% 0, 250% 0}
}














body {
  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.