CodePen

HTML

            
              .progress
  .current

.progress-funky
  .current
            
          
!

CSS

            
              div {
  height: 50px;
  margin-bottom: 10px;
}

$backColor: #666;
$foreColor: #465298;

.progress {
  // Using percentages prevents weird rendering, using fixed forces positioning to work, so you can align gradients across elements
	background: repeating-linear-gradient(
		-45deg,
		$backColor,
		$backColor 25%,
		shade($backColor,10%) 25%,
		shade($backColor,10%) 50%,
		$backColor 50%
	) top left fixed;
  // Then just define how big the background should be
	background-size: 30px 30px;
  .current {
    width: 25%;
    @include animation(width 5s infinite);
    background: repeating-linear-gradient(
      -45deg,
      $foreColor,
      $foreColor 25%,
      shade($foreColor,10%) 25%,
      shade($foreColor,10%) 50%,
      $foreColor 50%
    ) top left fixed;
    background-size: 30px 30px;
  }
}

// So this one is what happens when you use pixel-based gradients. At time of writing, the bars suffer from rounding errors and are uneven. Even if one day this is fixed, an argument could be made for %-based gradients being more maintainable in case the sizes need to be changed.
.progress-funky {
	background: repeating-linear-gradient(
		-45deg,
		$backColor,
		$backColor 10px,
		shade($backColor,10%) 10px,
		shade($backColor,10%) 20px,
		$backColor 20px
	) top left;
  .current {
    width: 25%;
    animation: width 5s infinite;
    background: repeating-linear-gradient(
      -45deg,
      $foreColor,
      $foreColor 10px,
      shade($foreColor,10%) 10px,
      shade($foreColor,10%) 20px,
      $foreColor 20px
    ) top left;
  }
}

@keyframes width {
  0% { width: 0%; }
  100% { width: 100%; }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................