前端写一个全屏遮罩中间是加载圈背景是高斯模糊顶部是加载进度条要求这个进度圈和进度条都有动效

以下是一个简单的实现方案：

HTML代码：

<div class="overlay">
  <div class="loading-circle"></div>
  <div class="loading-progress"></div>
</div>

CSS代码：

/* 全屏遮罩 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 高斯模糊背景 */
.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(背景图片路径);
  filter: blur(10px);
  z-index: -1;
}

/* 加载圈 */
.loading-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #fff;
  border-top-color: #0078FF;
  animation: loading-circle 1s linear infinite;
}

@keyframes loading-circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 加载进度条 */
.loading-progress {
  width: 80%;
  height: 10px;
  background-color: #fff;
  margin-top: 20px;
  position: relative;
}

.loading-progress::after {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  background-color: #0078FF;
  position: absolute;
  top: 0;
  left: 0;
  animation: loading-progress 2s linear infinite;
}

@keyframes loading-progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

JS代码：

// 显示遮罩
function showOverlay() {
  document.querySelector('.overlay').style.display = 'flex';
}

// 隐藏遮罩
function hideOverlay() {
  document.querySelector('.overlay').style.display = 'none';
}

// 更新进度条
function updateProgress(percent) {
  document.querySelector('.loading-progress::after').style.width = percent + '%';
}

使用方式：

// 显示遮罩
showOverlay();

// 隐藏遮罩
hideOverlay();

// 更新进度条
updateProgress(50); // 更新到50%