Spinner Fill

spinner-fill.sass

// <div class="spinner-css">
//   <span class="side sp_right">
//     <span class="fill"></span>
//   </span>
//   <span class="side sp_left">
//     <span class="fill"></span>
//   </span>
//   <span class="spinner-css-loading"></span>
// </div>

// Variables Spinner
$color_bg: #fff
$color_border_spinner: #09C
$size_spinner: 22px
$size_border_spinner: 4px
$time_loop: 57s
$interation_count: 1

.spinner-css
  position: relative
  height: $size_spinner
  width: $size_spinner
  +border-radius(50%)
  float: right
  margin-top: 12px
  .spinner-inner-cover
    position: absolute
    width: $size_spinner - $size_border_spinner
    height: $size_spinner - $size_border_spinner
    left: 0px
    top: 0px
    margin: $size_border_spinner / 2
    background: $color_bg
    opacity: 0
    z-index: 100
    +border-radius(999px)
    +animation(reveal .1s $time_loop forwards)
  .side
    height: $size_spinner
    width: $size_spinner / 2
    position: absolute
    overflow: hidden
    background: dimgray
    top: 0
    > .fill
      position: absolute
      width: $size_spinner
      height: $size_spinner
      background: $color_border_spinner
      +border-radius(50%)
    &.sp_right
      left: $size_spinner / 2
      +border-radius(0px 999px 999px 0px)
      > .fill
        right: 0
        border-right: $size_spinner / 2 solid $color_bg
        +animation(cssSpinnerRight $time_loop $interation_count linear, occult .1s $time_loop forwards)
    &.sp_left
      left: 0
      +border-radius(999px 0px 0px 999px)
      > .fill
        left: 0
        border-left: $size_spinner / 2 solid $color_bg
        +animation(cssSpinnerLeft $time_loop $interation_count linear, occult .1s $time_loop forwards)

.spinner-css-loading
  width: $size_spinner
  height: $size_spinner
  position: absolute
  border-radius: 50%
  border-right: solid 2px #eee
  border-top: solid 2px $color_border_spinner
  background: #eee
  box-shadow: 0 0 0 1px #eee
  opacity: 0
  +animation(spin 800ms $time_loop  linear infinite, reveal .1s $time_loop forwards)

+keyframes(spin)
  0%
    +transform(rotate(0deg))
  100%
    +transform(rotate(360deg))

+keyframes(reveal)
  0%
    opacity: 0
  100%
    opacity: 1

+keyframes(occult)
  0%
    opacity: 1
  100%
    opacity: 0

+keyframes(cssSpinnerRight)
  0%
    +transform(rotate(0deg))
  25%
    +transform(rotate(90deg))
  35%
    +transform(rotate(180deg))
  100%
    +transform(rotate(180deg))

+keyframes(cssSpinnerLeft)
  0%
    +transform(rotate(0deg))
  35%
    +transform(rotate(0deg))
  70%
    +transform(rotate(90deg))
  100%
    +transform(rotate(180deg))