मैं jQuery का उपयोग करके "कृपया प्रतीक्षा करें, लोड हो रहा है ..." एनीमेशन कैसे बना सकता हूं?
जवाबों:
आप इसे विभिन्न तरीकों से कर सकते हैं। यह "लोड हो रहा है ..." कहकर पृष्ठ पर एक छोटी स्थिति के रूप में एक सूक्ष्म हो सकता है, या नए डेटा लोड होने के दौरान पृष्ठ को धूसर करने वाले संपूर्ण तत्व के रूप में जोर से हो सकता है। नीचे मैं जो दृष्टिकोण ले रहा हूं वह आपको दिखाएगा कि दोनों विधियों को कैसे पूरा किया जाए।
स्थापित करना
आइए हम http://ajaxload.info से एक अच्छा "लोडिंग" एनीमेशन प्राप्त
करके शुरू करते हैं
आइए एक ऐसा तत्व बनाएं जिसे हम कभी भी दिखा सकते हैं / छुपा सकते हैं
<div class="modal"><!-- Place at bottom of page --></div>सीएसएस
इसके बाद आइए इसे कुछ झलक देते हैं:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}और अंत में, jQuery
ठीक है, jQuery पर। यह अगला भाग वास्तव में बहुत सरल है:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});बस! हम कुछ घटनाओं को शरीर के तत्व से जोड़ रहे हैं ajaxStartया कभी भी ajaxStopघटनाओं को निकाल दिया जाता है। जब एक अजाक्स घटना शुरू होती है, तो हम "लोडिंग" वर्ग को शरीर में जोड़ते हैं। और जब घटनाएँ होती हैं, हम शरीर से "लोडिंग" क्लास को हटा देते हैं।
इसे कार्रवाई में देखें: http://jsfiddle.net/VpDUG/4952/
.ajaxStop()और .ajaxStart()विधि केवल दस्तावेज़ से जुड़ी होनी चाहिए। डॉक्स
जहां तक वास्तविक लोडिंग इमेज की बात है, तो विकल्पों के एक समूह के लिए इस साइट को देखें।
अनुरोध शुरू होने पर इस छवि के साथ एक DIV प्रदर्शित करने के रूप में, आपके पास कुछ विकल्प हैं:
ए) मैन्युअल रूप से छवि दिखाएं और छिपाएँ:
$('#form').submit(function() {
$('#wait').show();
$.post('/whatever.php', function() {
$('#wait').hide();
});
return false;
});बी) ajaxStart और ajaxComplete का उपयोग करें :
$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});इसके उपयोग से तत्व किसी भी अनुरोध के लिए दिखाएगा / छिपाएगा । जरूरत के आधार पर अच्छा या बुरा हो सकता है।
सी) एक विशेष अनुरोध के लिए व्यक्तिगत कॉलबैक का उपयोग करें:
$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});जोनाथन और समीर ने सुझाव दिया (दोनों उत्कृष्ट उत्तर btw!), JQuery ने कुछ घटनाओं में बनाया है कि यह आपके लिए आगजनी का अनुरोध करते समय आपके लिए आग लगा देगा।
नहीं है ajaxStartघटना
जब भी AJAX अनुरोध शुरू होता है (और कोई भी पहले से सक्रिय नहीं है) एक लोडिंग संदेश दिखाएं।
... और यह भाई, ajaxStopघटना है
जब भी सभी AJAX अनुरोध समाप्त हो गए हैं, तब किसी कार्य को निष्पादित किया जाना चाहिए। यह एक अजाक्स इवेंट है।
साथ में, वे प्रगति संदेश दिखाने का एक अच्छा तरीका बनाते हैं जब पृष्ठ पर कहीं भी कोई भी अजाक्स गतिविधि हो रही हो।
HTML:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>स्क्रिप्ट:
$(document).ajaxStart(function(){
$('#loading').show();
}).ajaxStop(function(){
$('#loading').hide();
});.ajaxStartकेवल दस्तावेज़ में संलग्न किया जा सकता है, अर्थात। $(document).ajaxStart(function(){}).
आप अजाक्स लोड से कताई सर्कल के एनिमेटेड जीआईएफ को पकड़ सकते हैं - अपनी वेबसाइट की फ़ाइल में कहीं और चिपकाएँ । फिर आपको बस सही कोड के साथ एक HTML तत्व जोड़ना होगा, और जब आप काम कर लें, तब इसे हटा दें। यह काफी सरल है:
function showLoadingImage() {
$('#yourParentElement').append('<div id="loading-image"><img src="path/to/loading.gif" alt="Loading..." /></div>');
}
function hideLoadingImage() {
$('#loading-image').remove();
}फिर आपको अपने AJAX कॉल में इन विधियों का उपयोग करने की आवश्यकता है:
$.load(
'http://example.com/myurl',
{ 'random': 'data': 1: 2, 'dwarfs': 7},
function (responseText, textStatus, XMLHttpRequest) {
hideLoadingImage();
}
);
// this will be run immediately after the AJAX call has been made,
// not when it completes.
showLoadingImage();इसमें कुछ चेतावनी दी गई है: सबसे पहले, यदि आपके पास दो या दो से अधिक स्थानों पर लोडिंग छवि दिखाई जा सकती है, तो आपको ट्रैक करने की आवश्यकता है कि किसी तरह एक बार में कितने कॉल चल रहे हैं, और केवल तब छिपाएं जब वे हों सब कुछ कर दिया। यह एक सरल काउंटर का उपयोग करके किया जा सकता है, जिसे लगभग सभी मामलों के लिए काम करना चाहिए।
दूसरे, यह केवल एक सफल AJAX कॉल पर लोडिंग छवि को छिपाएगा। त्रुटि स्थिति को संभालने के लिए, आपको ध्यान देने की आवश्यकता होगी $.ajax, जो की तुलना में अधिक जटिल है $.load, $.getऔर पसंद है, लेकिन बहुत अधिक लचीला भी।
showLoadingImageशुरू करने से पहले और hideLoadingImageसमाप्त करने के बाद ही कॉल करें । काफी सरल होना चाहिए। setTimeoutयह सुनिश्चित करने के लिए कि ब्राउज़र वास्तव में नए <img>टैग को प्रस्तुत करता है, आपको यह सुनिश्चित करने के लिए किसी प्रकार की कॉल को छड़ी करने की आवश्यकता हो सकती है - मैंने ऐसे कुछ मामलों को देखा है जहां यह तब तक परेशान नहीं होता है जब तक कि जावास्क्रिप्ट ने निष्पादन समाप्त नहीं कर दिया।
जोनाथन का उत्कृष्ट समाधान IE8 में टूट जाता है (एनीमेशन बिल्कुल नहीं दिखाता है)। इसे ठीक करने के लिए, CSS को इसमें बदलें:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
opacity: 0.80;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
filter: alpha(opacity = 80)};AJAX अनुरोध शुरू होने और समाप्त होने पर jQuery इवेंट हुक प्रदान करता है। आप अपने लोडर को दिखाने के लिए इन पर हुक लगा सकते हैं।
उदाहरण के लिए, निम्नलिखित div बनाएँ:
<div id="spinner">
<img src="images/spinner.gif" alt="Loading" />
</div>इसे display: noneअपनी स्टाइलशीट में सेट करें । आप इसे जिस तरह से भी आप चाहते हैं शैली कर सकते हैं। आप Ajaxload.info पर एक अच्छी लोडिंग छवि उत्पन्न कर सकते हैं , यदि आप चाहते हैं।
फिर, आप कुछ का उपयोग कर सकते हैं जैसे कि अजाक्स अनुरोध भेजते समय इसे स्वचालित रूप से दिखाया जाए:
$(document).ready(function () {
$('#spinner').bind("ajaxSend", function() {
$(this).show();
}).bind("ajaxComplete", function() {
$(this).hide();
});
});अपने बॉडी टैग को बंद करने से पहले या जहाँ भी आप फिट दिखें, बस इस जावास्क्रिप्ट ब्लॉक को अपने पेज के अंत में जोड़ें ।
अब, जब भी आप अजाक्स अनुरोध भेजते हैं, तो #spinnerdiv दिखाया जाएगा। जब अनुरोध पूरा हो जाता है, तो इसे फिर से छिपा दिया जाएगा।
यदि आप पटरियों के साथ टर्बोलिंक का उपयोग कर रहे हैं तो यह मेरा समाधान है:
यह कॉफ़ीस्क्रिप्ट है
$(window).on 'page:fetch', ->
$('body').append("<div class='modal'></div>")
$('body').addClass("loading")
$(window).on 'page:change', ->
$('body').removeClass("loading")यह जोनाथन सैम्पसन के पहले उत्कृष्ट उत्तर पर आधारित 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;
}जैसे मार्क एच ने कहा कि ब्लॉकयूआई रास्ता है।
पूर्व .:
<script type="text/javascript" src="javascript/jquery/jquery.blockUI.js"></script>
<script>
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
$("#downloadButton").click(function() {
$("#dialog").dialog({
width:"390px",
modal:true,
buttons: {
"OK, AGUARDO O E-MAIL!": function() {
$.blockUI({ message: '<img src="img/ajax-loader.gif" />' });
send();
}
}
});
});
function send() {
$.ajax({
url: "download-enviar.do",
type: "POST",
blablabla
});
}
</script>अवलोकन करें : http://www.jaxload.info/ पर मुझे ajax-loader.gif मिला है ।
अन्य पदों के लिए सभी उचित सम्मान के साथ, आपके पास यहां एक बहुत ही सरल समाधान है, 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" />इससे बटन गायब हो जाएंगे, फिर "लोडिंग" का एक एनीमेशन उनकी जगह पर दिखाई देगा और अंत में बस एक सफलता संदेश प्रदर्शित करेगा।
$(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>');
});
}
);
});
});मैंने जो भी समाधान देखे हैं उनमें से अधिकांश या तो हमसे अपेक्षा करते हैं कि हम एक लोडिंग ओवरले को डिज़ाइन करें, इसे छिपा कर रखें और आवश्यकता पड़ने पर इसे unhide करें, या, gif या चित्र आदि दिखाएं।
मैं एक मजबूत प्लगइन विकसित करना चाहता था, जहां एक बस jQuery कॉल के साथ मैं लोडिंग स्क्रीन प्रदर्शित कर सकता हूं और कार्य पूरा होने पर इसे फाड़ सकता हूं।
नीचे कोड है। यह फ़ॉन्ट भयानक और jQuery पर निर्भर करता है:
/**
* Raj: Used basic sources from here: http://jsfiddle.net/eys3d/741/
**/
(function($){
// Retain count concept: http://stackoverflow.com/a/2420247/260665
// Callers should make sure that for every invocation of loadingSpinner method there has to be an equivalent invocation of removeLoadingSpinner
var retainCount = 0;
// http://stackoverflow.com/a/13992290/260665 difference between $.fn.extend and $.extend
$.extend({
loadingSpinner: function() {
// add the overlay with loading image to the page
var over = '<div id="custom-loading-overlay">' +
'<i id="custom-loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="font-size:48px; color: #470A68;"></i>'+
'</div>';
if (0===retainCount) {
$(over).appendTo('body');
}
retainCount++;
},
removeLoadingSpinner: function() {
retainCount--;
if (retainCount<=0) {
$('#custom-loading-overlay').remove();
retainCount = 0;
}
}
});
}(jQuery)); बस एक जेएस फ़ाइल में उपरोक्त डालें और इसे पूरे प्रोजेक्ट में शामिल करें।
CSS जोड़:
#custom-loading-overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
}
#custom-loading {
width: 50px;
height: 57px;
position: absolute;
top: 50%;
left: 50%;
margin: -28px 0 0 -25px;
}मंगलाचरण:
$.loadingSpinner();
$.removeLoadingSpinner();ध्यान दें कि ASP.Net MVC का उपयोग करते समय using (Ajax.BeginForm(..., सेटिंग से ajaxStartकाम नहीं चलेगा।
AjaxOptionsइस समस्या को दूर करने के लिए उपयोग करें :
(Ajax.BeginForm("ActionName", new AjaxOptions { OnBegin = "uiOfProccessingAjaxAction", OnComplete = "uiOfProccessingAjaxActionComplete" }))प्रति https://www.w3schools.com/howto/howto_css_loader.asp पर , यह बिना JS के 2-चरण की प्रक्रिया है:
1. इस HTML में जहां आप स्पिनर चाहते हैं: <div class="loader"></div>
2. इस स्पिनर को वास्तविक स्पिनर बनाने के लिए जोड़ें:
.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); }
}$("#loader").toggle();एनीमेशन शुरू करने के लिए लंबे समय तक चलने का अनुरोध करने से पहले कॉल कर सकते हैं और इसे दूर छिपाने के लिए अनुरोध के कॉलबैक फ़ंक्शन में एक और कॉल कर सकते हैं।
मैं एनीमेशन के लिए CSS3 का उपयोग करता हूं
/************ CSS3 *************/
.icon-spin {
font-size: 1.5em;
display: inline-block;
animation: spin1 2s infinite linear;
}
@keyframes spin1{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
/************** CSS3 cross-platform ******************/
.icon-spin-cross-platform {
font-size: 1.5em;
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin2 2s infinite linear;
}
@keyframes spin2{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
@-moz-keyframes spin2{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin2{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg)}
}
@-o-keyframes spin2{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(359deg)}
}
@-ms-keyframes spin2{
0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(359deg)}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
Default CSS3
<span class="glyphicon glyphicon-repeat icon-spin"></span>
</div>
<div class="col-md-6">
Cross-Platform CSS3
<span class="glyphicon glyphicon-repeat icon-spin-cross-platform"></span>
</div>
</div>