km-loader
  display: block
  position: relative
  top: 0
  right: 0
  bottom: 0
  left: 0
  width: 100%
  height: 100%
  svg
    display: block
    position: absolute
    height: 100px
    width: 100px
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    .c1
      fill: transparent
      stroke: #ed5a23
      stroke-width: 17%
      animation-name: km-loader-before
      animation-delay: .12s
      animation-duration: .6s
      animation-iteration-count: infinite
      animation-direction: alternate-reverse
      animation-timing-function: ease
    .c2
      fill: #ed5a23
      animation-name: km-loader-after
      animation-duration: .6s
      animation-iteration-count: infinite
      animation-direction: alternate-reverse
      animation-timing-function: ease

@keyframes km-loader-before
  100%
    transform: scale(100%)
    opacity: 1
  90%
    transform: scale(100%)
    opacity: 1
  0%
    transform: scale(20%)
    opacity: 0.5

@keyframes km-loader-after
  100%
    transform: scale(100%)
  90%
    transform: scale(100%)
  0%
    transform: scale(50%)