Ajax Loader
To display loading symbol while ajax call, you can use the below code.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="/sites/<sitename>/SiteAssets/CSS/Style.css" rel="stylesheet" type="text/css"/>
<script src="/sites/<sitename>/SiteAssets/Scripts/Test.js"></script>
<div class="modal" id="modalDiv"> </div>
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('/sites/<sitename>/SiteAssets/Images/ajax-loader.gif') //Use any images from your site
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
ajaxStart: function() { $('body').addClass("loading"); },
ajaxStop: function() { $('body').removeClass("loading"); }
});
$(document).ready(function()
{
//Ajax Code for loading data to you page
});
Content Editor Code:
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="/sites/<sitename>/SiteAssets/CSS/Style.css" rel="stylesheet" type="text/css"/>
<script src="/sites/<sitename>/SiteAssets/Scripts/Test.js"></script>
<div class="modal" id="modalDiv"> </div>
Style.css Code:
.modal {display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('/sites/<sitename>/SiteAssets/Images/ajax-loader.gif') //Use any images from your site
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
Test.js Code:
$(document).on({ajaxStart: function() { $('body').addClass("loading"); },
ajaxStop: function() { $('body').removeClass("loading"); }
});
$(document).ready(function()
{
//Ajax Code for loading data to you page
});
Comments
Post a Comment