Gmail Like Loader

Gmail like loader is simple , we will implement this in 3 section :

1. HTML part.
2. CSS Part
3. Javascript Part.

1. HTML part

          <div id="outer" style="border:1px solid;width:200px;height:10px;overflow:hidden;">
             <div id="inner" /></div>
         </div>

2. CSS part
    
          #inner
{
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);
-webkit-animation: load 5s linear 0 infinite;
-moz-animation: load 5s linear 0 infinite;
-ms-animation: load 5s linear 0 infinite;
-o-animation: load 5s linear 0 infinite;
animation: load 5s linear 0 infinite;
}

3. Javascript part

First include jQuery library  :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
inc=1;
           function Loading()
            {
                var w = parseInt((parseInt($("#inner").css("width"))/parseInt($("#inner").parent().css("width")))*100)+ inc;
                if((inc<101))
                $("#inner").width(inc+"%");
                inc++;
            }
           
            $(document).ready(function(){
               setInterval(Loading,80);
            });

Finaly demo will look like this :