SOURCE

console 命令行工具 X clear

                    
>
console
<div class="wrap">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
.wrap{ width: 200px; height: 50px; background: #f1f1f1; display: flex; justify-content: space-around; align-items: center;}
.wrap span{ width: 6px; height: 6px; border-radius: 3px; background: #ccc; animation: progress 0.7s infinite;}
.wrap span:nth-child(2){ animation-delay: 0.1s;}
.wrap span:nth-child(3){ animation-delay: 0.2s;}
.wrap span:nth-child(4){ animation-delay: 0.3s;}
.wrap span:nth-child(5){ animation-delay: 0.4s;}
.wrap span:nth-child(6){ animation-delay: 0.5s;}
.wrap span:nth-child(7){ animation-delay: 0.6s;}
.wrap span:nth-child(8){ animation-delay: 0.7s;}

@keyframes progress{
    0% {
        background: #ec161e;
    }
    50%{
        background: #ccc;
    }

}