我想在我的网站上放置一个“请等待,正在加载”旋转的圆圈动画。我应该如何使用jQuery来实现这一点?
当前回答
如果你正在使用Turbolinks With Rails,这是我的解决方案:
这是CoffeeScript
$(window).on 'page:fetch', ->
$('body').append("<div class='modal'></div>")
$('body').addClass("loading")
$(window).on 'page:change', ->
$('body').removeClass("loading")
这是基于Jonathan Sampson的第一个优秀答案的SASS CSS
# loader.css.scss
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, 0.4)
asset-url('ajax-loader.gif', image)
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
其他回答
这很简单。
HTML
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div id="cover"> <span class="glyphicon glyphicon-refresh w3-spin preloader-Icon"></span>Please Wait, Loading…</div>
<h1>Dom Loaded</h1>
</body>
CSS
#cover {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #141526;
z-index: 9999;
font-size: 65px;
text-align: center;
padding-top: 200px;
color: #fff;
font-family:tahoma;
}
JS - JQuery
$(window).on('load', function () {
$("#cover").fadeOut(1750);
});
至于实际加载的图像,请查看这个网站的一堆选项。
至于在请求开始时显示带有此图像的DIV,您有几个选择:
A)手动显示和隐藏图像:
$('#form').submit(function() {
$('#wait').show();
$.post('/whatever.php', function() {
$('#wait').hide();
});
return false;
});
B)使用ajaxStart和ajaxComplete:
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
使用这个元素将显示/隐藏任何请求。可能是好也可能是坏,取决于需要。
C)对特定的请求使用单独的回调:
$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});
这将使按钮消失,然后“加载”的动画将出现在它们的位置,最后只显示成功消息。
$(function(){
$('#submit').click(function(){
$('#submit').hide();
$("#form .buttons").append('<img src="assets/img/loading.gif" alt="Loading..." id="loading" />');
$.post("sendmail.php",
{emailFrom: nameVal, subject: subjectVal, message: messageVal},
function(data){
jQuery("#form").slideUp("normal", function() {
$("#form").before('<h1>Success</h1><p>Your email was sent.</p>');
});
}
);
});
});
根据https://www.w3schools.com/howto/howto_css_loader.asp,这是一个没有JS的2步过程:
1.在你想要旋转器的地方添加这个HTML: <div class="loader"></div>
2.添加下面的CSS来创建实际的旋转器:
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
出于对其他文章的尊重,这里有一个非常简单的解决方案,使用CSS3和jQuery,不使用任何进一步的外部资源或文件。
$('#submit').click(function(){ $(this).addClass('button_loader').attr("value",""); window.setTimeout(function(){ $('#submit').removeClass('button_loader').attr("value","\u2713"); $('#submit').prop('disabled', true); }, 3000); }); #submit:focus{ outline:none; outline-offset: none; } .button { display: inline-block; padding: 6px 12px; margin: 20px 8px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-image: none; border: 2px solid transparent; border-radius: 5px; color: #000; background-color: #b2b2b2; border-color: #969696; } .button_loader { background-color: transparent; border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid #969696; border-bottom: 4px solid #969696; width: 35px; height: 35px; -webkit-animation: spin 0.8s linear infinite; animation: spin 0.8s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 99% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 99% { transform: rotate(360deg); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="submit" class="button" type="submit" value="Submit" />
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?