.cmi-loading-indicator, .cmi-loading-indicator, .cmi-loading-indicator .cmi-loading-indicator-inside, .cmi-loading-indicator .cmi-circular, .cmi-loading-indicator .cmi-path

+transform-style(preserve-3d)
+transform(translateZ(0))
+animation-fill-mode(none)
+perspective(1000)
+backface-visibility(hidden)

.cmi-loading-indicator

+position(absolute, 0 0 0 0)
+transition(opacity .4s linear)
z-index: 100
margin: 0
padding: 0
opacity: 0
pointer-events: none
-webkit-backface-visibility: hidden
-webkit-perspective: 1000
backface-visibility: hidden
perspective: 1000
&.cmi-loading-indicator-background-dark
  background-color: rgba(#000, 0.7)
&.cmi-loading-indicator-background-light
  background-color: rgba(#fff, 0.8)
&.cmi-loading-fade
  +transition(opacity .4s linear)
  opacity: 1
  pointer-events: all
  .cmi-circular
    +animation(cmiLoadingRotate 2s linear infinite)
  .cmi-path
    +animation(cmiLoadingDash 1.5s ease-in-out infinite)
.cmi-loading-indicator-inside
  position: absolute
  width: $loading-diameter
  height: $loading-diameter
  left: 50%
  top: 50%
  margin: ($loading-diameter * -0.5) 0 0 ($loading-diameter * -0.5)
  pointer-events: none
.cmi-circular
  position: relative
  height: $loading-diameter
  width: $loading-diameter
  pointer-events: none
.cmi-path
  stroke-dasharray: 1, 200
  stroke-dashoffset: 0
  stroke-linecap: round
  stroke: $loading-color
  pointer-events: none

+keyframes(cmiLoadingRotate)

100%
  +transform(rotate(360deg))

+keyframes(cmiLoadingDash)

0%
  stroke-dasharray: 1, 200
  stroke-dashoffset: 0
50%
  stroke-dasharray: 89, 200
  stroke-dashoffset: -35
100%
  stroke-dasharray: 89, 200
  stroke-dashoffset: -124