Youtube-like loading bar with pure CSS

index.html

<div class="loading_bar_container">
  <div class="loading_bar"></div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

@mixin prefix($property, $value) {
    -webkit-#{$property}: #{$value};
    -moz-#{$property}: #{$value};
    -ms-#{$property}: #{$value};
    -o-#{$property}: #{$value};
    #{$property}: #{$value};
}

@mixin prefix_value($property, $value) {
    -webkit-#{$property}: -webkit-#{$value};
    -moz-#{$property}: -moz-#{$value};
    -ms-#{$property}: -ms-#{$value};
    -o-#{$property}: -o-#{$value};
    #{$property}: #{$value};
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

html, body {
  margin: 0;
  padding: 10px 0 0;
}

.loading_bar_container {
    width: 100%;
    height: 2px;
    position: relative;
    overflow: hidden;
    .loading_bar {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        @include prefix(animation, 'loading-bar 2s ease-out');
        @include prefix(animation-iteration-count, infinite);
        @include prefix(animation-timing-function, linear);
        // needs latest Compass, add '@import "compass"' to your scss
        @include filter-gradient(#ffffff, #ea463d, horizontal); // IE6-9
        @include background-image(linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(234,70,61,1) 70%));


    }
}

@include keyframes(loading-bar) {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
    @include prefix(transform, rotateY(0deg));
  }
  
  51% {
    @include prefix(transform, rotateY(180deg));
  }
  
  100% {
    left: -100%;
    @include prefix(transform, rotateY(180deg));
  }
}

Youtube-like loading bar with pure CSS.markdown

Youtube-like loading bar with pure CSS

Using the Youtube loading bar as a concept, and tweaking with some finesse.

A Pen by Ash Durham on CodePen.

License.