ema-loading-spinner{
    display: block;
    text-align: center !important;
    margin-top: -1rem;
    svg {
        width: 2rem;
        height: 2rem;
        &.spinner-android {
            animation: rotate 2s linear infinite;
            & .path {
                stroke-linecap: round;
                animation: dash 1.5s ease-in-out infinite;
            }
        }
        &.spinner-ios {
            animation: iosIntro .6s;
            path:nth-of-type(1) {
                animation: pulse 1s infinite linear;
            }
            path:nth-of-type(2) {
                animation: pulse 1s -.083s infinite linear;
            }
            path:nth-of-type(3) {
                animation: pulse 1s -.166s infinite linear;
            }
            path:nth-of-type(4) {
                animation: pulse 1s -.249s infinite linear;
            }
            path:nth-of-type(5) {
                animation: pulse 1s -.332s infinite linear;
            }
            path:nth-of-type(6) {
                animation: pulse 1s -.415s infinite linear;
            }
            path:nth-of-type(7) {
                animation: pulse 1s -.498s infinite linear;
            }
            path:nth-of-type(8) {
                animation: pulse 1s -.581s infinite linear;
            }  
            path:nth-of-type(9) {
                animation: pulse 1s -.664s infinite linear;
            }
            path:nth-of-type(10) {
                animation: pulse 1s -.747s infinite linear;
            }
            path:nth-of-type(11) {
                animation: pulse 1s -.83s infinite linear;
            }
            path:nth-of-type(12) {
                animation: pulse 1s -.913s infinite linear;
            }
          }
            
    }


    // Keyframes

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
  
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 150;
            stroke-dashoffset: 0;
        }
        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -35;
        }
        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -124;
        }
    }
    

    @keyframes pulse {
        50% { fill-opacity: .2 }
        to { fill-opacity: 1 }
    }
    
    @keyframes iosIntro {
        from {
            transform: scale(0);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }

}
