CSS Loading animation (Cross Browser Support)

index.html

<div class="container">
  <h1>Loading Bar</h1>
  <h2>Without text</h2>
  <div class="loading-bar"></div>
  <h2>With text</h2>
  <div class="loading-bar">
    <h4 class="text">Loading</h4>
  </div>
</div>

style.scss

/* Change settings here */
$border-color: #9d9d9d;
$border-radius: 4px;
$degree: -55deg;
$height: 20px;
$width: 227px;
$animation-speed: .75s;

/*bar colors*/
$dark-color: #d1d1d1;
$light-color: #FAFAFA;
$shadow-color: #b6b6b6;
$stroke-color: $border-color;
$inner-text-color: #fff;


@keyframes transform {
  0%   { left: 0; }
  100% { left: 12px; }
}


.loading-bar {
  position: relative;
  width: $width;
  margin: 0 auto;
  overflow: hidden;
  height: $height;
  border: 1px solid $border-color;
  border-radius: $border-radius;
  
  /* Box Shadow */
  -moz-box-shadow: inset 0px 2px 10px $shadow-color;
  -webkit-box-shadow: inset 0px 2px 10px $shadow-color;
  box-shadow: inset 0px 2px 10px $shadow-color;
    
  
  &:before {
    content: "";
    position: absolute;
    width: $width;
    height: $width;
    top: -500%;
    left: 0;
    z-index: -1;
    background: linear-gradient(to bottom, $light-color , $light-color 50%, $dark-color 50%,$dark-color);
    background-size: 500% 10px;
    transform: rotate($degree);
    animation: transform 1s infinite;
    animation-timing-function: linear;
  }
  
}

.text {  
  margin: 0;
  
  /* Text Info */
  color: $inner-text-color;
  text-shadow:
   -1px -1px 0 $stroke-color,  
    1px -1px 0 $stroke-color,
    -1px 1px 0 $stroke-color,
     1px 1px 0 $stroke-color;
}
















/* Stuff no one cares about */


body {
  background: #fff;
}

@import url(http://fonts.googleapis.com/css?family=Lato:700);

.container {
  margin: 0 auto;
  width: 500px;
  text-align: center;
  color: #454545;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
 }