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

CSS实现Loading加载的效果

例1:loading 直线加载

纯css实现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 平滑加载

纯css实现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 方块加载

纯css实现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 电池充电效果

纯css实现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>