纯css如何实现Loading加载效果

发布时间：2023-01-01 07:08:15 来源：网络

.

在希望的田野上，我们看到了希望，看到了未来，看到了祖国未来繁荣昌盛的景象。

写几个利用纯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>

到此这篇关于纯css如何实现Loading加载效果就介绍到这了。优秀是一种，越优秀就越想去，越努力就会越优秀。反过来也是一样，活得越差就越不想要去做些什么，或许是无力或许是真的太差了无从下手，于是越来越差，越差就越没动力去做，渐渐呆在舒适区，坐以待毙。更多相关纯css如何实现Loading加载效果内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章: