.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