/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {  
  background: red !important;  /* 初始颜色为#29d */  
  position: fixed;  
  z-index: 1031;  
  bottom: 0; /* 将进度条放置在底部 */  
  left: 0;  
  width: 100%;  
  height: 4px; /* 进度条的高度,默认2px */  
}

/* Fancy blur effect */
#nprogress .peg {  
  display: block;                 /* 将元素以块级元素的形式显示 */  
  position: absolute;             /* 使用绝对定位，允许脱离正常文档流 */  
  right: 0px;                    /* 元素距离其包含块（通常是最近的定位祖先元素）的右侧边缘0像素 */  
  width: 100px;                  /* 设置元素的宽度为100像素 */  
  height: 100%;                  /* 设置元素的高度为其包含块（通常是最近的定位祖先元素）的100% */  
  box-shadow: 0 0 10px red, 0 0 5px red; /*初始颜色为#29d  应用两个盒子阴影效果，一个模糊半径为10像素，颜色为#29d（一种蓝色），另一个模糊半径为5像素，同样颜色为#29d */  
  opacity: 1.0;                  /* 设置元素的不透明度为1.0，即完全不透明 */  
  
  /* 应用CSS3的转换效果 */  
  -webkit-transform: rotate(3deg) translate(0px, 10px); /* 在Webkit内核的浏览器中，将元素旋转3度并向下移动4像素 */  
  -ms-transform: rotate(3deg) translate(0px, 10px);     /* 在IE浏览器中，将元素旋转3度并向下移动4像素 */  
  transform: rotate(3deg) translate(0px, 10px);          /*初始translate(0px, -4px)， 在所有支持CSS3转换的浏览器中，将元素旋转3度并向下移动4像素 */  
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1032; /* 确保spinner在bar的上方 */  
  bottom: 10px; /* 根据需要调整spinner距离底部的距离 */ 
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: red;/* 初始颜色为#29d */
  border-left-color: red;/* 初始颜色为#29d */
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}