Thursday, 7 November 2013

CSS - Gmail-style progress bar when page is loading

<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="msg">Loading 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@gmail.com...

</div>
<div class="loader_div">
          <div class="displaying"></div>
</div>
</div>
</form>
</body>
</html>

The Output of the above page as shown in the below figure.


"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

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.