我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

今天来实现一下线性加载等待框，代码已放码上掘金！

页面结构

页面结构比较简单，就一个线性盒子

  <div class="battery"></div>

初始样式

先清除默认的内边距外边距，然后再将宽度和高度占满整个屏幕，设置好背景颜色，并设置溢出隐藏属性，消除页面滚动条

    body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
            padding: 0;
            margin: 0;
        }

线性盒子样式

我们使用固定定位结合CSS属性transform: translate实现在页面中的垂直水平居中，在设置好宽高，并设置溢出隐藏属性，线性加载动画超出进行隐藏

  .line {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 4px;
            overflow: hidden;
        }

来回运动的线，我们这里使用伪元素进行实现，伪元素的宽高和线性盒子一模一样大小，设置好背景颜色

.line::after {
            content: '';
            display: block;
            width: 200px;
            height: 4px;
            background: blue;
        }

线性运动动画

我们采用CSS动画实现线性运动，线性运动我们这里结合CSS属性的transform: translateX实现，通过该属性控制线性盒子伪元素的X轴移动，起始点从X轴-200px处开始，因为盒子宽就是200px，-200px可以将盒子全部隐藏掉，然后终点则是200px，这样可以实现出盒子从左往右移动的动画

  @keyframes move {
            0% {
                transform: translateX(-200px);
            }

            50% {
                transform: translateX(0px);
            }

            100% {
                transform: translateX(200px);
            }
        }

我们给线性盒子伪元素设置好动画，以及动画的执行时间和进行无限循环以及可以反转执行

   .line::after {
            animation: move 2s alternate infinite;
        }