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，现在只是显示效果。