纯 CSS 实现十个还不错的 Loading 效果

电池加载 f180bffaf7e541c9819c509bef6e81bf_tplv-k3u1fbpfcp-zoom-in-crop-mark_1304_0_0_0.GIF

.progress-5 { width:80px; height:40px; border:2px solid #000; padding:3px; background 0% no-repeat content-box content-box; position: relative; animation:p5 2s infinite steps(6); } .progress height: 10px; border: 2px solid #000; } @keyframes p5 { 100% {background-size:120%} } 原作者对 .progress -5::before 伪元素实现如下： .progress-5::before { content:""; position: absolute; top:-2px; bottom:-2px