Loading

效果图

HTML结构

    <div class="demo">

        <div class="demo-container">
            

            <div class="wch-loading">
                
                <span class="wch-loading-text">Loading</span>

            </div>

        </div>
    </div>

主要由两部分组成一个是loading的主体 <div class="wch-loading"></div>和 Loading组件里的文字Loading<span class="wch-loading-text">Loading</span>，外面的demo和demo-container只是为了例子方便居中显示的才加的，和组件没有关系。

CSS结构

.wch-loading{
    
    height: 6rem;
    width: 6rem;
    margin: 1.5rem 1.5rem 1.5rem 1.5rem;
    background-color: #FFFF99;
    border-radius: 5rem;
    box-shadow:0px 0px 0.5rem 0.3rem #FFFF99;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    animation: loading 2s linear infinite; 
    
}

.wch-loading-text{
    
    height: 1.5rem;
    width: 100%;
    color: #800080;
    font: 1rem Arial,Verdana,"宋体";
    animation: loadingtext 2s linear infinite; 

}

CSS部分分成两部分一个是静态CSS样式的设置，还有一部分是animation动态关键帧的设置
上面这部分是静态设置
wch-loading设置了大小，背景，倒角50%成为圆形 灵感来自月亮所以特意使用box-shadow:0px 0px 0.5rem 0.3rem #FFFF99;做了月晕 ,同时设置display为flex 并设置Loading的内容元素居中。同时设置了动态关键帧 ，无限循环的线性变化，单次时间2s 。
wch-loading-text的span元素居中在上面的wch-loading中，并设置了高度与字体大小相差不大主要为了字体可以在div中居中显示。并设置了动态关键帧 ，无限循环的线性变化，单次时间配合上面也是2s 。

@keyframes  loading{

    from{
        height: 6rem;
        width: 6rem;
        box-shadow:0px 0px 0.5rem 0.3rem #FFFF99; 
        opacity: 1;
    }
    to{
           height: 6rem;
       width: 6rem; 
       box-shadow:0px 0px 0.8rem 0.5rem #FFFF99; 
       opacity: 0.5;
    }

}


@keyframes loadingtext{

    from{
        opacity: 1;
        height:1.5rem;
        font: 1rem Arial,Verdana,"宋体";
    }
    to{
        opacity: 0.5;
        height: 3rem;
        font: 2rem Arial,Verdana,"宋体";
    }

}

这部分主要是设置了动态关键帧的起始和终止帧的样式，主要设置了wch-loading的透明度和阴影，wch-loading-text的透明度和字体大小。
本文的代码可点击链接下载。

待增强的地方

组件现在没有直接的js操作api用来打开和关闭loading，现在只是显示效果。