吹吹🌈屁，做做🌈Loading，內附彩虹魔力轉圈圈 🤔 彩虹Loading 結語

彩虹Loading

效果圖

HTML結構

            <div class="mask">
    
                <div class="loading">
                
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>
                    <div class="vertical-bar"></div>

                </div>

            </div>

主要有兩部分一部分是mask樣式的遮罩層，還有就是裏面的loading，veryical-barlaoding樣式。

CSS樣式

CSS部分分成兩部分來看首先看遮罩層的樣式

.mask{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255,0.8);
    z-index: 250;
    overflow: hidden;
    pointer-events: none;
}


.mask::before {
    content: "\2716";
    pointer-events: auto;
    position: absolute;
    top:5%;
    left: 80%;
    font-size: 3rem;
}

mask樣式設置了position爲相對body元素爲絕對位置脫離正常文檔流，並設置爲全屏，設置z軸層數爲250 完全沒有暗喻的意思哈。設置佈局爲彈性佈局，並使內部元素 水平 垂直 居中，並設置 鼠標事件失效。
.mask::before利用前置僞元素 創建關閉圖標，實現loading關閉功能。

接下來看一下重頭戲loading，veryical-bar

.loading{

    height: 4rem;
    width: 8rem;
    
    display: flex;
    align-items: center;

}

.loading .vertical-bar{
    
    width: 1rem;
    height: 4rem;
    margin: 0 3px;
    background-color: #000; 
    animation: loading-bar 0.8s infinite;
}

.loading .vertical-bar:nth-child(1){
    background-color: black;
}

.loading .vertical-bar:nth-child(2){
    animation-delay: 0.1s;
    background-color: red;
}

height: 4rem; width: 8rem;首先設置loading的長寬;

display: flex; align-items: center; 設置爲彈性佈局，這樣內部塊級元素不會獨佔一行了，並設置內部豎條垂直居中。

通過.loading .vertical-bar主要設置了豎條的長寬，外部間隔，背景色 還有變化的動畫。
通過.loading .vertical-bar:nth-child(n)設置內部一共8個豎條每個豎條的背景色不同 而且 動畫開始的延遲時間不同。

@keyframes loading-bar{

    0%{
        height: 4rem;
        opacity: 0.4;
    }
    50%{
        height: 0rem;
        opacity: 1;
    }
    100%{
        height: 4rem;
        opacity: 0.4;
    }

}

定義了豎條的動態幀，起始滿長度；0.4的不透明度，中途一般長度，1的不透明度，最後又是滿長度；0.4的不透明度。

結語

本文所有源碼可以點擊鏈接下載，源碼中還有彩虹圈圈Loading的彩蛋哦，趕緊去看看吧。