闲来无事第二期 — 纯css实现一个loading效果。

闲来无事第二期 — 纯css实现一个loading效果。

✌先上最终效果

🙌本次用到了sass预编译处理器，需要提前有sass的语法基础。但是也不会过于复杂

🥇首先，看下我们的文档结构。

    <div class="loading-panel">
        <span class="loading">
            <div class="spinner-fading-loading-circle">
                <div class="spinner-fading-loading-circle-cirlce circle-2"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-3"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-4"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-5"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-6"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-7"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-8"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-9"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-10"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-11"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-12"></div>
                <div class="spinner-fading-loading-circle-cirlce circle-13"></div>
            </div>
        </span>
        加载中...
    </div>

🥈下面是开始写sass代码

思路：1.创建12个圆点，这里是spinner-fading-loading-circle-cirlce的伪类元素::before，然后将我们的spinner-fading-loading-circle-cirlce circle-*旋转30 乘 * 度。

然后伪类元素就靠顶居中排版。这里的spinner-fading-loading-circle-cirlce 这些类是绝对定位position: absolute，定位参考的父元素是spinner-fading-loading-circle

开始在伪类元素上去应用动画。动画的逻辑也很简单，就是每一个都共同改变一个css变量就是透明度opacity

@keyframes spinner-fading-circle {
     0%,
     39%,
     100% {
        opacity: 0;
     }

     40% {
        opacity: 1;
     }
}

此时，元素应用动画效果后，他们是闪烁的状态的，因为他们动画执行的开始结束时间，动画内容都一样。

所以这时候，就要使用animation-delay:-val让每一个伪元素应用动画时间延迟一定时间就可以看到loading效果了。

🥉最后就能看到效果了

附上完整代码仓库地址：https://gitee.com/little-canon/blog-code/tree/master/loading