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

页面结构

这个样式结构并不复杂，一个div元素中包含了一个span元素，span元素中包含了我们让用户等待时提示的内容，i元素是loading效果的主要实现

    <div>
        <span>加载中...</span>
        <i></i>
    </div>

初始样式

我们的元素是放在body中，所以清除body元素的外边距和内边距再给其设置一个黑色背景，用于展示loading效果

   body {
            background: #000;
            padding: 0;
            margin: 0;
        }

loading大盒子实现

loading大盒子我们这里使用div元素进行实现，通过给其设置固定定位，定位结合transform: translate属性让显示在页面水平垂直居中的位置

        div {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

loading内容实现

loading内容我们放在span元素中，然后给span元素设置宽高和字体颜色，通过border-radius属性设置为圆形，在利用定位放在盒子内部，最后使用flex布局的方式让里面的内容居中显示

     span {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            color: #00ffff;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;

        }

loading效果实现

loading效果通过i元素实现，通过 display: block;将i元素变为块元素，设置好宽高，再将其设置为圆形，通过 box-shadow实现不规则圆形且设置好外阴影的颜色，由于loading效果是旋转的，所以这里需要设置下旋转中心点，我们设置到元素的正中心，然设置上旋转动画且无限循环

      i {
            display: block;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            box-shadow: 4px 0 #e77d7d;
            transform-origin: center center;
            animation: rotate 1s linear infinite;
      
        }

loading动画实现

loading旋转效果我们通过css动画进行实现，设置动画终点为旋转一圈，这样正好转到终点

        @keyframes rotate {
            100% {
                transform: rotate(360deg);
            }
        }

代码已放码上掘金！