jquery+转圈等待效果

jQuery是一个非常流行的JavaScript库，它提供了很多简化网页开发的便利工具。其中一个非常有用的功能就是转圈等待效果，它可以让网页在长时间加载数据或进行复杂计算时，让用户感受到正在处理中，避免用户感到无声无息地等待。

//CSS样式.loading {
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    animation: loading 1s infinite linear;
}
.loading::before {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}
.loading::after {
    content: '';
    width: 52px;
    height: 52px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    border: 8px solid #fdd835;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spin 1s infinite linear;
}
@keyframes spin {
100% {
    transform: rotate(360deg);
}
}
@keyframes loading {
0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
100% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
//JavaScript代码$(document).ajaxStart(function() {
    $("#loading").fadeIn();
}
    );
$(document).ajaxStop(function() {
    $("#loading").fadeOut();
}
    );
$(document).ready(function() {
$.ajax({
url: "data.json",success: function(data) {
    console.log(data);
}
}
    );
}
    );
    

这段代码中，我们首先定义了一个CSS样式，其中使用了animation和keyframes属性来实现转圈等待的动画效果。接着，我们使用JavaScript代码来监控jQuery的ajax请求，当开始发送请求时，显示loading效果，请求结束后隐藏loading效果。

使用转圈等待效果可以让网站更加友好，提高用户体验，如果你的网站需要发送大量的ajax请求或进行复杂的计算，这个效果将非常有用。

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