Create Process Bar Like Gmail In HTML

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>DEMO - Gmail like progress bar with CSS and jQuery</title>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<style>
body {
background: rgb(245, 245, 245);
}

.g-div {
position: absolute;
top: calc(50% -   6px);
left: calc(50% -   160px);
text-align: center;
width: 320px;
font-weight: bold;
}

.loader-gmail {
padding: 1px;
overflow: hidden;
border: 1px solid #a4a4a4;
}

.progress {
width: 320px;
height: 8px;
background-image: linear-gradient(135deg, #6187f2 0%, #6187f2 25%, #5679da 25%, #5679da
50%, #6187f2 50%, #6187f2 75%, #5679da 75%, #5679da 100%);
background-repeat: repeat;
background-position: 0px 0px;
background-size: 16px 16px;
background-clip: content-box;
animation: loading 1s linear infinite;
-o-animation: loading 1s linear infinite;
-moz-animation: loading 1s linear infinite;
-webkit-animation: loading 1s linear infinite;
}

@keyframes loading {
    from {
      background-position:0px 0px;
    }
    to {
 background-position: -16px 0px;
    }
}
@-webkit-keyframes loading {
    from {
      background-position:0px 0px;
    }
    to {
 background-position: -16px 0px;
    }
}
@-moz-keyframes loading {
    from {
      background-position:0px 0px;
    }
    to {
 background-position: -16px 0px;
    }
}
@-o-keyframes loading {
    from {
      background-position:0px 0px;
    }
    to {
 background-position: -16px 0px;
    }
}
</style>

<script>
    var p=0;
    function timeout_trigger() {
  $(".progress").css("max-width",p+"%");
  $(".progress-view").text(p+"%");
  if(p!=100) {
  setTimeout('timeout_trigger()', 50);
  }
  p++;
}
    timeout_trigger();
  </script>
</head>
<body>
<div style="width:730px;margin:auto">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- demos -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-4537529140156254"
     data-ad-slot="4444050329"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

<div class="g-div">
Loading <span class="progress-view">0%</span>
<div class="loader-gmail">
<div class="progress"></div>
</div>
</div>


</body>


</html>

Continue reading →