A Pen by Kaushalya Mandaliya.

index.html

<div class="loader">
  <div class="ancl" data-js="loader--alpha"></div>
</div>

Loading-(-A-progress-like-:p).markdown

Loading ( A progress like :p)

For counting, used js which is made by @TimPietrusky.

A Pen by Kaushalya Mandaliya on CodePen.

License.

script.js

/*
 *If it doesn't count exactly then click on Run button.
 *Special thanks to http://codepen.io/shshaw/pen/gEiDt
 *and http://codepen.io/chriscoyier/pen/AzdcK
 *and Special thanks to @TimPietrusky for count JS...
 *2014 by Kaushalya Mandaliya
 *https://twitter.com/kmandalwala
 */
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

var loader = document.querySelector('[data-js="loader--alpha"]'),
    start = null,
    time = 5000,
    max_value = 100
;

/**
 * 
 * Creates a requeastAnimationFrame function to increase
 * the value of a data-attribute to 100%;
 *
 */
function step(timestamp) {
  // Save the progress
  var progress;
  
  // Get the start time
  if (start === null) {
    start = timestamp;
  }
  
  // Calculate the progress
  progress = timestamp - start;
  
  // If not progressed
  if (progress < time) {
    loader.dataset.value = (progress / time * max_value).toPrecision(2);
    requestAnimationFrame(step);
    
  // Finished
  } else {
    loader.dataset.value = 100;
    start = null;
    requestAnimationFrame(step);
  }
}

// Start animation
requestAnimationFrame(step);

style.scss

@import "compass";
.loader {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 1.2em;
  width: 17em;
  border: 0.1em solid #bbb;
  @include box-shadow(0 0 0.5em 0.1em rgba(black,0.2));
  @include border-radius(0.5em);
}
.ancl {
  @include animation(cc 5s linear infinite);
  width: 17em;
  height: 1.2em;
  @include background-size(2em 2em);
  @include background-image(linear-gradient(
    45deg, 
    rgba(black, 0.1)  25%, 
    transparent       25%, 
    transparent       50%, 
    rgba(black, 0.1)  50%, 
    rgba(black, 0.1)  75%, 
    transparent       75%, 
    transparent
  ));  
  position: absolute;
  text-align: right;
  &:after {
    content: attr(data-value) '%';
    margin: -1.2em -1.0em;
    position: absolute;
    letter-spacing: .125em;
    font-weight: bold;
    color: #aa9;
  }
}
@keyframes cc {
  from { background-position: 0; width: 5%; }
  to { background-position: -5em; width: 100%; }
}