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(); // 隐藏加载圆圈百分比
通过以上样式和代码的结合,就可以实现页面加载时的圆圈百分比效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。