问使用css创建加载器

EN

 <div style="margin-left:400px; margin-right:400px " class="progress-wrap 
 progress" data-progress-percent="20">
   <div class="progress-bar progress"></div>
 </div>

@import "compass/css3";
.red{
    background:black;
  margin-left:300px;
  top:100px;

}
.box{
    width:100px !important;
    height:100px !important;
  z-index:-1;

}
.progress {
  width: 100%;
  height: 10px;
}
.progress-wrap {
  background: #f80;
  margin: 200px 0;
  overflow: hidden;
  position: relative;
  .progress-bar {
    background: white;
    left: 0;
    position: absolute;
    top: 0;
  }
}

moveProgressBar();
$(window).load(function() {
    moveProgressBar();
});

function moveProgressBar() {
  console.log("moveProgressBar");
    var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
    var getProgressWrapWidth = $('.progress-wrap').width();
    var progressTotal = getPercent * getProgressWrapWidth;
    var animationLength = 6500;


    $('.progress-bar').stop().animate({
        left: progressTotal
    }, animationLength);
}