像極了月亮的Loading Loading 待增強的地方

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