body {
  display: flex; /* 将父元素设为弹性容器 */
  justify-content: center; /* 在主轴上居中对齐子元素 */
  align-items: center; /* 在侧轴上居中对齐子元素 */
  background-color: #F6F7FB; /* 修改背景颜色为#F6F7FB */
  height: 100%; /* 将元素高度设为视口高度的90% */
}

.loader {
  width: 72px; /* 将加载器的宽度设为48px */
  height: 72px; /* 将加载器的高度设为48px */
  margin: auto; /* 将加载器在主轴上居中 */
  position: relative; /* 将加载器设为相对定位 */
}

.loader::before {
  content: ''; /* 定义before的内容为空 */
  width: 68px; /* 将before的宽度设为48px */
  height: 10px; /* 将before的高度设为5px */
  background: #E8EAF4; /* 修改before的背景颜色为#E8EAF4 */
  position: absolute; /* 将before设为绝对定位 */
  top: 100px; /* 将before的上边界距离加载器上边界60px */
  left: 0%; /* 将before的左边界距离加载器左边界0% */
  border-radius: 50%; /* 将before设为圆形 */
  animation: shadow01 0.5s linear infinite; /* 对before应用shadow01动画 */
}

.loader::after {
  content: ''; /* 定义after的内容为空 */
  width: 100%; /* 将after的宽度设为100% */
  height: 100%; /* 将after的高度设为100% */
  background: #FFFFFF url('focuscy_logo.svg') no-repeat center center; /* 给after设置背景图片和显示方式 */
  background-size: cover; /* 调整背景图片大小以覆盖整个after元素 */
  position: absolute; /* 将after设为绝对定位 */
  top: 0; /* 将after的上边界与加载器上边界对齐 */
  left: 0%; /* 将after的左边界与加载器左边界对齐 */
  border-radius: 12px; /* 将after设为正方形并添加4px的圆角 */
  animation: jump01 0.5s linear infinite; /* 对after应用jump01动画 */
}

@keyframes jump01 {
  15% {
    border-bottom-right-radius: 3px; /* 给after添加3px的底右圆角 */
  }

  25% {
    transform: translateY(9px) rotate(22.5deg); /* 将after向下移动9px并顺时针旋转22.5度 */
  }

  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg); /* 将after向下移动18px并等比缩小1倍，同时顺时针旋转45度 */
    border-bottom-right-radius: 40px; /* 给after添加40px的底右圆角 */
  }
  75% {
    transform: translateY(9px) rotate(67.5deg); /* 将after向下移动9px并逆时针旋转67.5度 */
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(180deg); /* 将after恢复到原始位置并等比放大1倍，同时逆时针旋转360度 */
  }
}

@keyframes shadow01 {
  0%,
  100% {
    transform: scale(1, 1); /* 将before等比放大1倍 */
  }
  50% {
    transform: scale(1.2, 1); /* 将before等比放大1.2倍 */
  }
}