.ig-progress-bar {
  $alert: #fa9915;
  $error: #e8543f;
  $notice: #00b5e5;
  $success: #8fcf00;
    
  background-color: #f6f6f6;
  border: 1px solid #e5e5e5;
  @include border-top-radius(5px);
  @include border-right-radius(5px);
  @include border-bottom-radius(5px);
  @include border-left-radius(5px);
  box-shadow: inset 0 0 3px 0 rgba(darken(#f6f6f6, 50%), 0.15);
  height: 40px;
  margin: 5px auto;
  padding: 2px;
  width: 100%;
  clear: both;

  > span.meter {
    animation: progress .5s linear infinite;
    background-image: linear-gradient(
                        -45deg, rgba(#fff, 0.15) 25%,
                        transparent 25%,
                        transparent 50%,
                        rgba(#fff, 0.15) 50%,
                        rgba(#fff, 0.15) 75%,
                        transparent 75%
                      );
    background-repeat: repeat-x;
    background-size: 40px 40px;
    border: 1px solid #e5e5e5;
    @include border-top-radius(3px);
    @include border-right-radius(3px);
    @include border-bottom-radius(3px);
    @include border-left-radius(3px);
    box-sizing: border-box;
    display: block;
    height: 100%;
      &.alert {
          background-color: $alert;
      }
      &.notice {
          background-color: $notice;
      }
      &.error {
          background-color: $error;
      }
      &.success {
          background-color: $success;
      }
  }
}

@-webkit-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@-moz-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@-ms-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@-o-keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}

@keyframes progress {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 0;
  }
}