CSS实现加载页面动画效果

CSS实现一个旋转的加载页面静态效果图：

html代码：

  <div class="loading">
     <span>loading.....span>
  div>
</body>

CSS代码：

    * {
        /* 初始化 取消页面内外边距 */
        margin: 0;
        padding: 0;
    }
    body {
        /* 100%窗口高度 */
        height: 100vh;
        /* 渐变背景 */
        background: linear-gradient(to bottom, #2b5876, #09203f);
        /* 弹性布局 水平、垂直居中 */
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
    }

    .loading{
      width: 200px;
      height: 200px;
      box-sizing: border-box;
      /* background-color: #911f7e; */
      border-radius: 50%;
      border-top: 10px solid #EE5A24;
      position: relative;
      animation: a1 2s linear infinite;
    }
    .loading::before,.loading::after{ /*伪元素一定要与content一起使用。::brfore表示在loading前面加东西，::after表示在元素后面加内容。content就是内容*/
      content: '';
      width: 200px;
      height: 200px;
      /* background: red; */
      position: absolute;
      left: 0;
      top: -10px;
      box-sizing: border-box;
      border-radius: 50%;
    }
    .loading::before{
      border-top: 10px solid #e67e22;
      transform: rotate(120deg);
    }
    .loading::after{
      border-top: 10px solid #009432;
      transform: rotate(240deg);
    }
    .loading span{
      position: absolute;
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      animation: a2 2s linear infinite;
    }
    @keyframes a1{
      to{transform: rotate(360deg);}
    }
    @keyframes a2{
      to{transform: rotate(-360deg);}
    }