console
const progress = document.getElementById('progress');
// setInterval(()=>{
// progress.style.width = Math.random()*100 + '%';
// },3000)
<div class="wrap">
<div class="progress" id='progress'>
</div>
</div>
body{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wrap{
height: 10px;
width: 200px;
border-radius: 10px;
background-color: gainsboro;
}
.progress{
height: 100%;
width: 55%;
border-radius: 10px;
background-color: #1b53ec;
transition: width .3s;
background-image: linear-gradient(90deg,
rgba(255,255,255, 0),
rgba(255,255,255, 1),
rgba(255,255,255, 0));
background-size: 40px 100%;
background-repeat: no-repeat;
background-position: left -40px top 0;
animation: shine 2s ease infinite;
}
@keyframes shine {
to {
background-position: right -40px top 0;
}
}