<div class="wrapper">
  <div class="load-bar">
    
    <div class="load-bar-inner" data-loading="0">
      	<span id="counter"></span>
    </div>
  </div>
  <h1>Loading</h1>
  <p>Please wait...</p>
</div>

@import "compass/css3";

* { box-sizing: border-box; }

html { height: 100%; }

body {
 	height: 100%;
  background: #efeeea;
  background: linear-gradient(#f9f9f9, #cecbc4);
  color: #757575;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  text-align: center;
}

.wrapper {
 	width: 350px;
  margin: 80px auto;
}

.wrapper .load-bar {
  width: 100%;
  height: 25px;
  border-radius: 30px;
  background: #dcdbd7;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8),
    inset 0 2px 3px rgba(0,0,0,0.2);
}

.wrapper .load-bar:hover .load-bar-inner,
.wrapper .load-bar:hover #counter {
 	animation-play-state: paused; 
}

.wrapper .load-bar-inner {
  height: 99%;
  width: 0%;
  border-radius: inherit;
  position: relative;
  background: #c2d7ac;
  background: linear-gradient(#e0f6c8, #98ad84);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 5px rgba(0,0,0,0.3),
    0 4px 5px rgba(0,0,0,0.3);
  animation: loader 10s linear infinite;
}

.wrapper #counter {
 	position: absolute;
  background: #eeeff3;
  background: linear-gradient(#eeeff3, #cbcbd3);
  padding: 5px 10px;
  border-radius: 0.4em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px 1px rgba(0,0,0,0.2),
    0 1px 3px 1px rgba(0,0,0,0.1);
  left: -25px;
  top: -50px;
  font-size: 12px;
  font-weight: bold;
  width: 44px;
  animation: counter 10s linear infinite;
}

.wrapper #counter:after {
	content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #cbcbd3;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -4px;
  bottom: -4px; 
  box-shadow: 
    3px 3px 4px rgba(0,0,0,0.2),
    1px 1px 1px 1px rgba(0,0,0,0.1);
  border-radius: 0 0 3px 0;
}

.wrapper h1 {
  font-size: 28px;
  padding: 20px 0 8px 0;
}

.wrapper p {
  font-size: 13px;
}

@keyframes loader {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes counter {
  from { left: -25px; }
  to { left: 323px; }
}

$(function(){
  
  var interval = setInterval(increment,100);
  var current = 0;

  function increment(){
    current++;
    $('#counter').html(current+'%'); 
    if(current == 100) { current = 0; }
  }
  
  $('.load-bar').mouseover(function(){
    	clearInterval(interval);
  }).mouseout(function(){
      interval = setInterval(increment,100);
 	});

});