Hi friends,in this article i will explain about CSS - Gmail-style progress bar when page is loading .
I already explained in the previous articles about How to Bind Nested Gridview from Database in asp.net with C#/VB.NET,Marquee tag or How to Scroll Text From left to right or How to Move the Text in HTML,C#/VB.NET:Save the generated pdf directly to the server directory folder without user prompt in ASP.NET and JQuery:How to Display Current Date and Time on Webpage using ASP.NET
In ASP.NET page write the below code.
ASP.NET:
I already explained in the previous articles about How to Bind Nested Gridview from Database in asp.net with C#/VB.NET,Marquee tag or How to Scroll Text From left to right or How to Move the Text in HTML,C#/VB.NET:Save the generated pdf directly to the server directory folder without user prompt in ASP.NET and JQuery:How to Display Current Date and Time on Webpage using ASP.NET
In ASP.NET page write the below code.
ASP.NET:
<html>
<head id="Head1"
runat="server">
<title>CSS -
Gmail-style progress bar when page is loading</title>
<style type="text/css">
body
{
font-family:
'Verdana';
background:
#E3F5E2;
font-size:
15px;
}
.msg {
margin-top:
45px;
text-align:
center;
font-weight:
bold;
margin-bottom:3px;
}
.loader_div {
text-align:
center;
width:
350px;
border:
1px solid #999;
padding:
2px;
height:
9px;
margin-right:
auto;
margin-left:
auto;
}
.displaying {
width:
0;
height:
100%;
background-color:
#6188F5;
background-repeat:
repeat-x;
background-position:
0 0;
-webkit-background-size:
16px 8px;
-moz-background-size:
16px 8px;
-o-background-size:
16px 8px;
background-size:
16px 8px;
background-image:
-webkit-linear-gradient(315deg,transparent,transparent
33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent
66%,transparent);
background-image:
-moz-linear-gradient(315deg,transparent,transparent
33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent
66%,transparent);
background-image:
-o-linear-gradient(315deg,transparent,transparent
33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent
66%,transparent);
background-image:
linear-gradient(315deg,transparent,transparent
33%,rgba(0, 0, 0, 0.12) 33%,rgba(0, 0, 0, 0.12) 66%,transparent
66%,transparent);
/*animation*/
-webkit-animation:
load 3s linear 0 infinite;
-moz-animation:
load 3s linear 0 infinite;
-ms-animation:
load 3s linear 0 infinite;
-o-animation:
load 3s linear 0 infinite;
animation:
load 3s linear 0 infinite;
}
/* Then animate the stuff */
@-webkit-keyframes load {
0% { width: 0% ;
background-position:0
0;}
100% { width: 100%;
background-position:-40px
0;
}
}
@-ms-keyframes load {
0% { width: 0% ;
background-position:0
0;}
100% { width: 100%;
background-position:-40px
0;
}
}
@-o-keyframes load {
0% { width: 0% ;
background-position:0
0;}
100% { width: 100%;
background-position:-40px
0;
}
}
@keyframes load {
0% { width: 0% ;
background-position:0
0;}
100% { width: 100%;
background-position:-40px
0;
}
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div id="ShowDiv"
runat="server">
<div class="loader_div">
<div class="displaying"></div>
</div>
</div>
</form>
</body>
</html>
|
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."
No comments:
Post a Comment