彩虹Loading

效果图

rainbow-loading.gif

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的彩蛋哦，赶紧去看看吧。