写几个利用纯CSS实现loading加载效果的示例，代码非常的简单，有需要的可以参考一下。

CSS实现Loading加载的效果

例1：loading 直线加载

实例代码：

<style> .load{ width:120px; height:20px; background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:loading 2s infinite linear; margin-bottom: 20px; } @keyframes loading { 100% {background-size:100%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例2：loading 平滑加载

实例代码：

<style> .load{ width:120px; height:20px; border-radius: 20px; background: linear-gradient(orange 0 0) 0/0% no-repeat lightblue; animation:load 2s infinite steps(10); margin-bottom: 20px; } @keyframes load {100% {background-size:110%}} </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例3：loading 方块加载

实例代码：

<style> .load{ width:120px; height:20px; -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) 0/20%; background:linear-gradient(#000 0 0) 0/0% no-repeat #ddd; animation:load 2s infinite steps(6); margin-bottom: 20px; } @keyframes load { 100% {background-size:120%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

例4：loading 电池充电效果

实例代码：

<style> .load { width:80px; height:40px; border:2px solid #000; padding:3px; background: repeating-linear-gradient(90deg,#000 0 10px,#000 0 16px) 0/0% no-repeat content-box content-box; position: relative; animation:load 2s infinite steps(6); margin-bottom: 20px; } .load::before { content:""; position: absolute; top: 50%; left:100%; transform: translateY(-50%); width:10px; height: 10px; border: 2px solid #000; } @keyframes load { 100% {background-size:120%} } </style> <div class="load"></div> <span>飞鸟慕鱼博客</span>复制

分享到：