// settings
$loaderWidth : 10em
$loaderColor : #f80
$duration : 1.5s

// computations
$loaderHeight : $loaderWidth/4
$marginLeft : $loaderWidth/2
$marginTop : $loaderHeight/2
$insideWidth : $loaderWidth/6
$insideHeight : $loaderWidth/10
$borders : $loaderWidth/40
$position : $loaderWidth/13

// animation
+keyframes(loading)
  0%
    left: 0
  50%
    left: $loaderWidth - $insideWidth
  100%
    left: 0

// styles
.st-loader
  width: $loaderWidth
  height: $loaderHeight
  position: absolute
  top: 50%
  left: 50%
  margin: -$marginTop 0 0 (-$marginLeft)
  box-sizing: border-box

.st-loader:before,
.st-loader:after
  content: ''
  display: block
  position: absolute
  top: 0
  bottom: 0
  width: $marginTop
  box-sizing: border-box
  border: $borders solid $loaderColor

.st-loader:before
  left: -$position
  border-right: 0

.st-loader:after
  right: -$position
  border-left: 0

.st-loader .equal
  display: block
  position: absolute
  top: 50%
  margin-top: -$insideHeight/2
  left: $marginLeft - $insideWidth/2 // centered if no animation
  height: $insideHeight
  width: $insideWidth
  border: $borders solid $loaderColor
  box-sizing: border-box
  border-width: $borders 0
  +animation(loading $duration infinite ease-in-out)