css3 loading组件

最新推荐文章于 2022-05-20 00:53:37 发布

wx_lidysun

最新推荐文章于 2022-05-20 00:53:37 发布

阅读量762

点赞数

分类专栏： HTML/CSS 文章标签： css3 css

本文链接：https://blog.csdn.net/lidysun/article/details/70049893

版权

HTML/CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

效果图
HTML

<div class="loading">
    <i class="loading-icon"></i>
    <span class="loading-text">正在加载...</span>
</div>

    .loading{
        position:fixed;
        top:50%;
        left:50%;
        margin-top:-20px;
        margin-left:-55px;
        z-index: 9;

        min-width:100px;
        height:20px;
        padding:10px 5px;
        text-align:center;
        line-height:20px;
        font-size:14px;
        color:#fff;
        border-radius:2px;
        -webkit-border-radius:2px;

        background:rgba(0,0,0,.7);
    }

    .loading-icon{
        display:inline-block;
        height:20px;
        width:20px;
        margin-right:2px;
        vertical-align:middle;
        background:url(loading.png) center no-repeat;
        background-size:20px 20px;
        animation: rotate .75s linear infinite;
        -webkit-animation: rotate .75s linear infinite;
    }

    @keyframes rotate{
        from {transform:rotate(0deg)}
        to {transform:rotate(360deg)}
    }

    @-webkit-keyframes rotate
    {
        from {-webkit-transform:rotate(0deg)}
        to {-webkit-transform:rotate(360deg)}
    }