SOURCE

console 命令行工具 X clear

                    
>
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;
  }
}