/* 自定义动态渐变色 Pace.js 加载进度条 */

/* 隐藏 Pace.js 默认的那个小圆点 */
.pace .pace-activity {
  display: none;
}

/* 进度条主体 */
.pace .pace-progress {
  /* 关键部分：定义渐变背景 */
  /* 我们定义一个比进度条本身宽两倍的渐变背景 */
  background: linear-gradient(to right, #ff25b2, #9a4eff, #3a8dff, #9a4eff, #ff25b2);
  background-size: 200% 200%; /* 背景尺寸扩大 */

  /* 设置进度条的尺寸和圆角 */
  height: 5px;
  border-radius: 5px;
  
  /* 添加柔和的辉光效果 */
  box-shadow: 0 0 10px rgba(154, 78, 255, 0.7);

  /* 核心！应用下面的动画效果 */
  animation: pace-gradient-animation 2s linear infinite;
}

/* 定义动画的关键帧 */
/* 这个动画的作用就是让背景图像水平来回移动 */
@keyframes pace-gradient-animation {
  0% {
    background-position: 0% 50%; /* 动画开始时，背景在最左边 */
  }
  50% {
    background-position: 100% 50%;/* 动画进行到一半，背景移动到最右边 */
  }
  100% {
    background-position: 0% 50%; /* 动画结束，背景回到最左边，形成循环 */
  }
}