.preload
  @include animation(container-rotate 1568ms linear infinite)
  width: 36px
  height: 36px
  line-height: normal
  display: inline-block
  vertical-align: top
  position: relative

  .spinner-layer
    @include animation(fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both)
    width: 100%
    height: 100%
    position: absolute
    opacity: 1
    border-color: $text-muted

  // Patch the gap that appear between the two adjacent div.circle-clipper while the
  // spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).

  .gap-patch
    width: 10%
    height: 100%
    position: absolute
    top: 0
    left: 45%
    overflow: hidden
    border-color: inherit
    .circle
      width: 1000%
      left: -450%

  .circle-clipper
    width: 50%
    height: 100%
    display: inline-block
    position: relative
    overflow: hidden
    border-color: inherit

    .circle
      @include animation(none)
      width: 200%
      height: 100%
      border-width: 3px
      border-style: solid
      border-color: inherit
      border-bottom-color: transparent !important
      border-radius: 50%
      position: absolute
      top: 0
      right: 0
      bottom: 0

    &.left .circle
      @include animation(left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both)
      transform: rotate(129deg)
      left: 0
      border-right-color: transparent !important
    &.right .circle
      @include animation(right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both)
      transform: rotate(-129deg)
      left: -100%
      border-left-color: transparent !important