Description:
In this article, I will explain how to show loading icon or text while page is
loading using Jquery.
In some scenario, web page takes more time
to load if it is having lot of images or content.
Instead of showing blank white space, it
would be a great idea of showing loading icon or loading text like “Page is
loading”. It will improve the user experience of your website.
Create a div. Add text or image for
displaying proper indication that the page is loading.
By default div will be visible. Once the
document is ready, simply hide the div.
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$("#divLoading").fadeOut(3000);
});
</script>
<style
type="text/css">
.DivLoad
{
vertical-align:
middle;
font-family:
Comic Sans MS;
color:
Red;
position:
absolute;
top:
48%;
left:
48%;
font-size:
x-large;
margin-left:
-50px;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div
id="divLoading"
class="DivLoad"
runat="server">
Please Wait ...
<%-- Add some
Animation image for displaying graphics --%>
</div>
</form>
</body>
</html>
Showing
Animation during a Long Page Load, show loading icon while page is loading,
show loading image while the webpage loads, display loading animation until the
page fully loaded, Loading image or text while the page loads
0 comments:
Post a Comment