一个简易的loading加载图

最新推荐文章于 2023-06-08 09:52:04 发布

Msro

最新推荐文章于 2023-06-08 09:52:04 发布

阅读量938

点赞数

原文链接：https://juejin.im/post/5adf304151882567137dd94d

版权

htlm

<div class="loading"></div>   
复制代码

css

.loading{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    position: relative;
}
.loading::before,.loading::after {
    content:"";
    width:0px;
    height: 0px;
    border-radius: 50%;
    background-color: #000;
    animation: loading 1.5s linear infinite;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}
.loading::after{
    animation-delay: 0.75s;
}
@keyframes loading{
    0%{
        width: 0;
        height:0;
        opacity: 1;
    }
    100%{
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
复制代码