css 加载圆圈百分比

CSS加载圆圈百分比是网页设计中常见的效果之一，通过这种方式可以让用户更直观地了解页面加载的进度。具体实现方法如下：

/* CSS样式代码 */
.loading {
  width: 80%;
  height: 80%;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
}
.loading.show {
  display: flex;
}
.loading .circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #ccc;
  border-top-color: #67CF22;
  animation: loading-circle 1s linear infinite;
}
.loading .percent {
  margin-top: 10px;
  font-size: 24px;
}
@keyframes loading-circle {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

以上是CSS实现加载圆圈百分比的基本样式，接下来需要在JavaScript中完成对圆圈和百分比的控制。具体代码如下：

// JavaScript代码
function showLoading(percent) {
  var loadingEl = document.querySelector('.loading');
  var circleEl = document.querySelector('.loading .circle');
  var percentEl = document.querySelector('.loading .percent');

  if (loadingEl && circleEl && percentEl) {
    loadingEl.classList.add('show');
    circleEl.style.transform = 'rotate(' + (percent / 100 * 360) + 'deg)';
    percentEl.textContent = percent + '%';
  }
}

function hideLoading() {
  var loadingEl = document.querySelector('.loading');

  if (loadingEl) {
    loadingEl.classList.remove('show');
  }
}

// 调用方法
showLoading(50); // 显示50%的加载进度
hideLoading(); // 隐藏加载圆圈百分比

通过以上样式和代码的结合，就可以实现页面加载时的圆圈百分比效果。