.container
  h1 Segmented Loader/Progress Sass Mixin
  h3 mask-image + mask-size + inline SVG
  - for (var i = 1; i <= 9; i++)
    .loader(class=`e${i}`)
      .percent

//mixin
@mixin segmented_loader($segments, $spacing, $radius){
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="#{$spacing/2}" y="0" height="100%" rx="#{$radius}" ry="#{$radius}" style="width:calc(100% - #{$spacing})"/></svg>');
  mask-size: #{100/$segments}% 100%;
}


//defaults
.loader{
  width:100%;
  height:1.5em;
  background:rgba(white,0.1);
  position:relative;
  margin:1em 0;
  
  .percent{
    background:#00aaff;
    position:absolute;
    height:100%;
  }
  
  @include segmented_loader(10, 1px, 0.25em);
}


//examples
.e2{
  @include segmented_loader(50, 1px, 0.1em);
  .percent{background:#e4932a}
}

.e3{
  height:3em;
  @include segmented_loader(50, 50%, 0.1em);
  .percent{background:#009688}
}

.e4{
  @include segmented_loader(25, 20%, 1em);
  .percent{background:white}
}

.e5{
  height:3em;
  @include segmented_loader(25, 10%, 1em);
  .percent{background:#f44336}
}

.e6{
  height:0.5em;
  @include segmented_loader(100, 50%, 0);
}

.e7{
  height:0.55em;
  @include segmented_loader(70, 2px, 0.5em);
  .percent{background:linear-gradient(90deg,#CDDC39, #009688, #005c96)}
}

.e8{
  @include segmented_loader(30, 1px, 0.25em);
  .percent{
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/2-color-animated-gif.gif);
    background-size:auto 200%;
    filter: grayscale(100%);
  }
}

.e9{
  .percent{
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/2-color-animated-gif.gif);
    background-size:auto 300%;
  }
}



//---



//unrelated styles
@import url('https://fonts.googleapis.com/css?family=Nunito');

*,*:before,*:after{box-sizing:border-box}

body{
  padding:50px;
  background:#564d52;
  color:white;
  font-family: 'Nunito', sans-serif;
  min-height:100vh;
  display:grid;
  place-items:center;
  
  h1{margin-top:0}
  h3{opacity:0.5}
}

.container{
  width:100%;
  max-width:800px;
  padding:20px;
}

.loader{
  @for $i from 1 through 9 {
    &:nth-of-type(#{$i}) .percent { animation-delay: $i * 0.25s; }
  }  
}

.percent{
  animation:demo_load 5s infinite alternate;
  
  @keyframes demo_load {
    from {width: 0%}
    to   {width: 100%}
  }
}