.loading-spinner {
      display: inline-block;
      position: relative;
      top: 0.1em;
      width: 1em;
      height: 1em;
      margin-right: 0.2em
}
.loading-spinner::before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    border-style: solid;
    border-color: #fff #fff #fff #c81e6e;
    border-radius: 50%;
    content: '';
    -webkit-transform: rotate(0deg) translate(-50%, -50%);
            transform: rotate(0deg) translate(-50%, -50%);
    -webkit-animation-name: spin;
            animation-name: spin;
    -webkit-animation-duration: .8s;
            animation-duration: .8s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}
.loading-spinner--large {
        width: 48px;
        height: 48px;
}
.loading-spinner--large::before {
    width: 42px;
    height: 42px;
    border-width: 6px;
}
.loading-spinner--small {
        width: 24px;
        height: 24px;
}
.loading-spinner--small::before {
    width: 24px;
    height: 24px;
    border-width: 2px;
}
@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
                transform: rotate(0deg) translate(-50%, -50%);
    }

    to {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
                transform: rotate(360deg) translate(-50%, -50%);
    }
}
@keyframes spin {
    from {
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
                transform: rotate(0deg) translate(-50%, -50%);
    }

    to {
        -webkit-transform: rotate(360deg) translate(-50%, -50%);
                transform: rotate(360deg) translate(-50%, -50%);
    }
}