css 启动页 loading动画

<!-- 这是一个HTML加载动画，主要由多个旋转的圆点和"Loading..."文字组成 -->
<div class="index-html-loader">
  <!-- 加载中的文本 -->
  <div class="text">Loading...</div>

  <!-- 水平排列的圆点集合 -->
  <div class="horizontal">
    <div class="circlesup">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div class="circlesdwn">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>

  <!-- 垂直排列的圆点集合 -->
  <div class="vertical">
    <div class="circlesup">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div class="circlesdwn">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

<style>
  /* 加载动画的整体样式，主要将其置于屏幕中心 */
  .index-html-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  /* "Loading..."文本的动画效果 */
  .index-html-loader .text {
    position: absolute;
    left: -1.3em;
    top: -1.7em;
    animation: text 2s infinite;
  }

  /* 垂直旋转的圆点集合样式 */
  .index-html-loader .vertical {
    position: absolute;
    top: -1.84em;
    left: -0.4em;
    transform: rotate(90deg);
  }

  /* 水平旋转的圆点集合样式 */
  .index-html-loader .horizontal {
    position: absolute;
    top: 0em;
    left: 0em;
  }

  /* 上下镜像的圆点样式 */
  .index-html-loader .circlesup {
    position: absolute;
    top: -4.7em;
    right: 12.1em;
  }
  .index-html-loader .circlesdwn {
    position: absolute;
    top: 2.5em;
    right: -13.5em;
    transform: rotate(180deg);
  }

  /* 圆点的旋转动画样式 */
  .index-html-loader .circle {
    position: absolute;
    width: 15em;
    height: 15em;
    transform: rotate(45deg);
    animation: orbit 2s infinite;
  }

  /* 各圆点的样式和颜色设置 */
  .index-html-loader .circle:after {
    content: '';
    position: absolute;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    background: #13A3A5; /* 颜色1 */
  }
  /* ... 其他圆点样式 ... */

  /* 定义旋转动画关键帧 */
  @keyframes orbit {
    0% {
      transform: rotate(45deg);
    }
    100% {
      transform: rotate(405deg);
    }
  }

  /* 定义文本动画关键帧 */
  @keyframes text {
    0% {
      transform: scale(0.2);
    }
    100% {
      transform: scale(1);
    }
  }
</style>