<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.