<div id="file-progress">
  
  <div class="file-progress-container">
    <div class="file-progress">
      <div class="file-progress-bar">
       <!-- this div could easily be replaced with a pseudo-element once webkit is able to properly animate pseudo-elements -->
      </div>
      <div class="file-progress-info">Loading: <span class="file-progress-percent">0%</span></div>
    </div>
  </div>
 
</div>
@import "compass/css3";

/**
 * CSS Animation setup 
 */
@mixin progress-bar-stripes() {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -30px 0;
  }
}

@-webkit-keyframes progress-bar-stripes {
  @include progress-bar-stripes;
}
@-moz-keyframes progress-bar-stripes {
  @include progress-bar-stripes;
}
@-ms-keyframes progress-bar-stripes {
  @include progress-bar-stripes;
}
@keyframes progress-bar-stripes {
  @include progress-bar-stripes;
}

/**
 * Styles
 */
#file-progress {
  @include border-radius( 3px );
  @include box-shadow( 0 2px 3px rgba( #000, .15 ) );
  border: 1px solid #dcdcdc;
  width: 60%;
  margin: 30px auto;
  padding: 40px;
}

.file-progress-container {
  @include box-shadow( ( inset 0 8px 8px -8px rgba( #000, .15 ),  inset 0 0 1px #4a4a4a ) );
  @include border-radius( 3px );
  background: #f5f5f5;
  padding: 1px;
  height: 42px;
}

.file-progress {
  @include background( linear-gradient( #0096d0, #025f84 ) );
  @include box-shadow( inset 0 1px 0 rgba( #fff, .3 ) );
  @include border-radius( 3px );
  @include transition( width 1s linear );
  border: 1px solid #016084;
  margin: -1px 0 0 -1px;
  position: relative;
  height: 100%;
  
  &.in-progress {
    @include background( linear-gradient( #6fb21f, #4f890b ) );
    border-color: #4c8015;
    
    .file-progress-bar {
     -webkit-animation: progress-bar-stripes 1s linear infinite;
        -moz-animation: progress-bar-stripes 1s linear infinite;
             animation: progress-bar-stripes 1s linear infinite;
    }
    
  } // &.in-progress
  
} // .file-progress

.file-progress-bar {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: -moz-repeating-linear-gradient(-45deg, transparent, transparent 25%, rgba( #fff, .15 ) 25%, rgba( #fff, .15 ) 50%);
  background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 25%, rgba( #fff, .15 ) 25%, rgba( #fff, .15 ) 50%);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 25%, rgba( #fff, .15 ) 25%, rgba( #fff, .15 ) 50%);
  background-size: 30px 30px;
  content: "";
}

.file-progress-info {
  text-shadow: -1px -1px 1px rgba( #000, .65 );
  color: #fff;
  padding: 0 10px 0 15px;
  font: bold 13px/42px sans-serif;
  white-space: nowrap;
}
View Compiled
var percent   = 0,
    $progress = $('.file-progress'),
    $info			= $('.file-progress-percent');

$progress.addClass('in-progress');

var percent_update = setInterval( function() {
  $progress.css({ width : percent + '%' });
  $info.text( percent + '%' );
  percent += 5;
  
  if ( percent > 100 ) {
    clearInterval( percent_update );
    setTimeout( percent_final, 1000 );
  }
  
}, 1000 );

var percent_final = function() {
  $info.text('Done!');
  $progress.removeClass('in-progress');
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js