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();
     // 隐藏加载圆圈百分比

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！