我们遇到加载,要么是UI框架中自带,要么就是百度,然后CV到项目中?但是,自己实现的时候,又会没有思路。下面本篇文章就来给大家分享10个纯 CSS 实现的 Loading 效果,希望对大家有所帮助!
在推特上面看到 T. Afif 介绍的十个 Loading
效果。如上图。
Yeah,很赞哦,挺实用的,遂记录下来。
为保证运行正常,咱先规定下:
* { box-sizing: border-box; }
1. 平滑加载
<div class="progress-1"></div>
.progress-1 { width:120px; height:20px; background: linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:p1 2s infinite linear; } @keyframes p1 { 100% {background-size:100%} }
-
linear-gradient(#000 0 0)
你可以理解为linear-gradient(#000 0 100%)
,如果还不熟悉,复制linear-gradient(#000 0 50%, #f00 50% 0)
,替换原先的部分跑一下。觉得linear-gradient(#000 0 0)
别扭的话,直接写#000
即可。